DevGuru CSS2: text-shadow

PROPERTY: text-shadow

text-shadow : color &| length length length, ... &| ... ... ...,

Compatibility: Currently not supported by any browser
Version: Level 2
Inherited: No

The text-shadow property is a comma delimited list that sets each color, blur, and shadow effect you wish to apply to the associated character, word, line, or text. Each effect is applied in the provided order (i.e., the listed order is also the stacking order where the subsequent effect lays on top of the previous effect). The shadow effects always appear to lay under the text. You can optionally set a color for each effect. You can also set a horizontal and vertical distance that the effects will extend either to the right or left and/or either above or below the text. Further, you can optionally set a blur distance around the text.

color

The optional color value specifies the color of the shadow effect. If a color value is not specified for the text-shadow property and if a color has been set by the color property for the font, then that color will be used. The color value can appear in order either before or after the length length length values.

length length length

The first length value sets the horizontal distance to the right or left that the shadow effect will extend. A positive value extends to the right. A negative value extends to the left. A value of zero dictates no horizontal shadow effect.

The second length value sets the vertical distance above or below that the shadow effect will extend. A positive value extends above. A negative value extends below. A value of zero dictates no vertical shadow effect.

The optional third length value sets the radius of the distance that a blur effect will extend around the associated text. If you only want a blur effect, set both the first and second length to zero.

Each individual length value can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	cm
ems	em
inches	in
millimeters	mm
picas	pc
pixels	px
points	pt

Text shadows can also be used with the :first-letter and :first-line pseudo-elements.

:first-letter

The :first-letter pseudo-element is used to apply the shadow effect to the first letter of a paragraph. It does this by the use of what is called a fictional tag sequence. In this code fragment, the fictional tag sequence is: <p:first-letter> ... </p:first-letter>
The closing tag is mandatory.

Code:
p:first-letter { font-size: 36px; color: red; text-shadow: red 0px 0px 5px;}
...
<p>
<p:first-letter>D</p:first-letter>evGuru is the best reference site on the Web.
<p>

:first-line

The :first-line pseudo-element is used to apply the shadow effect to the first line of a paragraph. It requires the use of a fictional tag sequence (see above).

In this example, three shadow effects are specified. The list order dictates which shadows effects lay on top of other effects. The stacking order is:

The first effect is on the bottom,

the second effect lies on top of the first,

and the third effect lies on top of the second.

Code:
p { text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px -5px; }