HTML and CSS Reference
In-Depth Information
First let's set up some text (the code is copied from the original site):
<
span
class
="
extruded
">
Extrude Me
</
span
>
And some basic styling (the code is copied from the original site):
body
{
background-color
:
#444
;
text-align
:
center
;
}
.extruded
{
color
:
#888
;
font-family
:
proxima-nova-1, proxima-nova-2,
'Helvetica Neue'
, Arial,
sans-serif
;
font-size
:
48px
;
font-weight
:
bold
;
text-shadow
:
#000 3px 3px
;
}
Here, we've applied some basic styles and added a
text-shadow
. But this text-shadow
doesn't look three-dimensional; to accomplish the extruded effect, we'll need to
add more
text-shadows
:
text-shadow
:
#000 1px 1px, #000 2px 2px, #000 3px 3px
;
This will add three different text-shadows to our text, stacked on top of each other to create
the three dimensional appearance we want.
STYLING THE HOVER STATE
Next, let's add a hover state with a bigger text-shadow:
.extruded:hover
{
color
:
#FFF
;
text-shadow
:
#58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E
5px 5px, #58E 6px 6px
;
}
