HTML and CSS Reference
In-Depth Information
text-align
:
center
;
}
.extruded
{
color
:
#888
;
font-family
:
proxima-nova-1, proxima-nova-2,
'Helvetica Neue'
, Arial,
sans-serif
;
/* the original site doesn't use the @font-face attribute */
font-size
:
48px
;
font-weight
:
bold
;
text-shadow
:
#000 1px 1px, #000 2px 2px, #000 3px 3px
;
position
:
relative
;
-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
;
}
.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
;
}
SHORTCOMINGS
While applying several CSS3 text-shadows works well when the text is static, it falls a bit short
when used alongside the transition animation.
In short, the biggest text-shadow animates just fine, but the other text-shadows aren't applied
until the animation completes. This causes a quick correction: the browser stutters with a basic
drop-shadow before filling in the rest diagonally.
Fortunately, we can make this drawback relatively unnoticeable, provided that we follow a few
style guidelines. Basically, we want to hide the bulk of the extruded portion with the top text.
This means that we should generally use this effect with bolder fonts, such as the Proxima
