Is it easy to fade from plain text in italics?

Question

Is there a way to do this when my user hovers over plain text, which is an anchor, the text smoothly transitions to oblique or italic text to show that it is a link (including underscore)

Here is an example of what I'm trying to do ...

<a href="http://oldsite.com"> <p class="footertext">Take me to the old site...</p> </a> 

---

 p.footertext { font-size:12px; padding-left:4px; text-decoration:none; } p.footertext:hover { /*text:decoration: "italicize smoothly"*/ } 

Answer 1

You can use CSS3 transform functions to simulate italic text. You can also use CSS3 transitions to get the smooth transition you're looking for.

 .italic { -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .italic:hover { -webkit-transform: skewX(-20deg); -moz-transform: skewX(-20deg); -o-transform: skewX(-20deg); transform: skewX(-20deg); } 

Jsfiddle

Answer 2

Not. Skewed text does not match text italics. An italic font is not just a skewed font; it is completely different. You may possibly cross out, dissolve between them, but the skew does not give you the correct text in italics.