HTML and CSS Reference
In-Depth Information
2. Save styles.css.
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.
Search WWH ::

Custom Search