Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 16

Here, we've added three more text-shadows to increase the depth of the extrude effect. But
this effect alone is too flat; we want the text to look like it's popping off the page. So, let's
reposition the text to make it appear to grow taller from the base of the extruded section:

.extruded {
position : relative ;

}

.extruded:hover {
color : #FFF ;
text-shadow : #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E
5px 5px, #58E 6px 6px ;
left : -6px ;
top : -6px ;

}

Now in the hover state, the extruded text moves up the same distance as our max
text-shadow value. We also added position:relative , which must be attached to the base
state, not just the hover state, or else it will cause problems when we animate it.

ANIMATING THE TRANSITION

3

Next, we can add a CSS3 transition to our text to animate the color change and extrude effect:

.extruded {
-moz-transition : all 0.3s ease-out ; /* FF3.7+ */
-o-transition : all 0.3s ease-out ; /* Opera 10.5 */
-webkit-transition : all 0.3s ease-out ; /* Saf3.2+, Chrome */
transition : all 0.3s ease-out ;

}

This triggers a smooth animation for our different CSS changes on hover. While it doesn't work
in all browsers, it does degrade nicely to the basic hover effect.

Bringing it all together:

body {
background-color : #444 ;