HTML and CSS Reference
In-Depth Information
■
The
text-shadow
property introduced in CSS3 allows for one or more
<shadow>
effects to be applied to the text of an element. This shadow
is drawn around the letters themselves, rather than around the outer
edges of the box like with
box-shadow
(Chapter 14).
■
none:
No text shadow is applied.
■
<shadow>
: A description of a single shadow is
<color>
<offset-x>
<offset-y>
<blur-radius>
or
<offset-x>
<offset-y>
<blur-radius>
<color>
, where
<blur-radius>
is optional and defaults to a length
of
0
.
h2 {
text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;
/* transparent black shadow shifted right 2 and down 2 with
a 5px blur */
}
You can create the appearance of embossed text by mixing light and
dark
text-shadow
effects, as is done in this multiple-shadow example:
h2 {
text-shadow: rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.3) 0
1px;
}
Multiple shadows on the same element are drawn front (first shadow
listed) to back (last shadow).
