HTML and CSS Reference
In-Depth Information
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.
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 ;
Search WWH ::

Custom Search