Geek Answers Handbook

How to make a text with a skew line, but not letters?

I have skewed text in HTML / CSS. For example: ( http://jsfiddle.net/UPeYT/ )

p { -webkit-transform: skew(-8deg); -moz-transform: skew(-8deg); -o-transform: skew(-8deg); transform: skew(-8deg); }

I would like the text alignment to be distorted, but the words themselves were not in italics. How can i do this?

+6
source share
3 answers

I created what I needed, but I'm not sure that this is exactly what you need. In fact, I take a paragraph, distorting it, and then breaking each word into its own range with a warp. I'm sure this is terrible for redrawing performance.

fiddle

CSS

 span { -webkit-transform: skew(-18deg); -moz-transform: skew(-18deg); -o-transform: skew(-18deg); transform: skew(-18deg); display: inline-block; position: relative; } p { -webkit-transform: skew(18deg); -moz-transform: skew(18deg); -o-transform: skew(18deg); transform: skew(18deg); padding:30px; }

javascript (uses jquery):

 $(document).ready(function(){ var words = $('p').text().split(' '); $('p').empty(); for (var i=0;i<words.length;i++){ if (words[i]!='') { $('p').append('<span>'+words[i]+'</span> '); } } });

HTML is just a P tag with any content.

+3
source

Just a thought, but I think this is the only correct answer:

It's impossible. Let me show you how I came to this answer. I tried it with font-style: italic , which should not change if skew made it italic for me, but by default it does not make it italic. It is just a skew transformation that does it this way. If you change the degree, you will see that it becomes more direct. It rotates the text and it looks like italics, but it is not.

Here is what I mean: http://jsfiddle.net/UPeYT/7/

You can see that it is very different from yours: http://jsfiddle.net/UPeYT/10/

You can wrap the lines in a span or p tag. you want to backtrack and give them text-indent to achieve what you want.

0
source

Something like that?

I add the parent element to the <p> element and apply the opposite!

see http://jsfiddle.net/joseapl/UPeYT/9/

0
source

More articles:


All Articles