As you saw in the image gallery tutorial on Adding Drop Shadows, there's nothing like a drop shadow to add dimension to a web page. CSS 3 includes one property that lets you add drop shadows to text to add depth and interest to headlines, lists, and paragraphs (see Figure 16-7).
The text-shadow property requires four pieces of information: the horizontal offset (how far to the left or right of the text the shadow should appear), the vertical offset (how far above or below the text the shadow should appear), the blurriness of the shadow, and the color of the drop shadow. For example, here's the text-shadow property that creates the effect at top in Figure 16-7:
text-shadow: -4px 4px 3px #999999;
The first value— –4px—means "place the shadow 4 pixels to the left of the text." (A positive value here would place the shadow to the right of the text.) The second value—4px—places the shadow 4 pixels below the text. (A negative value would place the shadow above the text.) The 3px value defines how blurry the shadow should be. A zero value (no blur) results in a sharp drop shadow; the larger the value, the more blurry and indistinct the shadow. Finally, the last value is the drop shadow's color.
You can even add multiple drop shadows for more complex effects (see bottom image in Figure 16-7): just add a comma followed by additional drop shadow values, like this:
text-shadow: -4px 4px 3px #666, 1px -1px 2px #000;
There's no limit (except good taste) to the number of shadows you can add this way. Sadly, this effect works only in Firefox 3.5, Safari, Chrome, and Opera. All versions of Internet Explorer and versions 3 and earlier of Firefox ignore this property. For that reason, don't rely on this effect to make text readable. The bottom image in Figure 16-7, shows you what not to do: The text color is white and it's readable only because the drop shadows define the outline of the text. In Internet Explorer, the text would be invisible—white text on a white background.
