HTML and CSS Reference
In-Depth Information
2.
Save styles.css.
text-shadow
Initial value:
none
| Inherited: Yes | Applies to: All | CSS3
Browser support: IE 10+, Firefox 3.5+, Chrome 2.1+, Opera 9.5+, Safari 1.1+
Much like how you give a box a shadow using the
box-shadow
property, which was covered in Chapter 5, you can
also give text a shadow using the
text-shadow
property (see Figure 11-6).
text-shadow
works in all browsers
without a prefix except for Internet Explorer versions 6, 7, 8, and 9. Because a text shadow is only a visual style, the
fact it isn't shown in these versions of Internet Explorer doesn't matter.
1.
In styles.css, add the following declaration to the
p + .offer
rule set:
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
2.
Save styles.css.
Figure 11-6
The text-shadow applied to the offer text.
The
text-shadow
syntax works in a similar way to
box-shadow
but takes a maximum of three values, rather
than four, which modify the shadow as follows:
• The first value represents the horizontal offset—how far the shadow is to the right of the text, a negative
value to its left. The shadow you added is offset 2 pixels to the right.
• The second value represents the vertical offset—how far the shadow is to the bottom of the text, a negative
value to the top. Again, you gave the offer text shadow a 2-pixel offset to the bottom.
• The third value is the blur of the shadow. This value is optional, and in its absence, the shadow would have
no blur. When you declare a blur of 1 px, the shadow applied to the offer text has a very mild blur.
Following from the shadow values is an optional color. By default, a shadow is black, but the shadow you added
uses the
rgba()
color function to apply black with an alpha opacity of
0.2
, making it more of a gray color.
As with
box-shadow
, you can use multiple shadows on text by separating each shadow with a comma:
1.
In styles.css, modify the
text-shadow
declaration to include two text shadows on the offer text:
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2),
4px 4px 2px rgba(0, 0, 0, 0.1);
2.
Save styles.css.
A shadow that follows another is placed behind it. The second text shadow applied is even subtler than the first, but
both work together to help the text stand out a little more.
letter-spacing
