0

I'm building a webpage from PSD. At there, I've seen some little bit curved text.

Look the above 3 images. They aren't the straight line. They're little bit curved/oblique/awry. So, how can I make that text by CSS?

user1896653
  • 3,247
  • 14
  • 49
  • 93

3 Answers3

0

It seems like a skew transformation would do the job: CSS3 skew at MDN

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • 2
    *Note: The `skew()` function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.* – Blender May 24 '13 at 16:09
0

When you look closely, the baseline of the text is not curved but rotated. This transformation can be done with:

transform: rotate(5deg);

Be sure to support all browsers, e.g.:

-webkit-transform: rotate(5deg);
Saphired
  • 83
  • 1
  • 5
0

Using CSS3 transforms. Make sure your target browsers support it: http://caniuse.com/#feat=transforms2d Also, you might need to use prefixes to make it work in all browsers.

<p>Texty ipsum</p>

<style>
p {
    transform: rotate(-4deg);
}
</style>
antila
  • 364
  • 1
  • 4
  • It doesn't work in IE8 as stated on caniuse.com. To get it to work in IE8 you can look at the answer here: http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie – antila May 24 '13 at 16:21