Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 6 • Text Shadows

M

text-shadow: 3px 3px #000;

T

text-shadow: 3px 3px 4px #AAA;

X

text-shadow: 12px 12px 12px #AAA;
Figure 55: Three basic text shadows.

J

text-shadow: -8px -8px 4px #AAA;

Y

text-shadow: 0px 0px 10px hsla(60, 0%, 50%,1);

2

text-shadow: -18px 0px 3px hsla(125, 80%, 50%,.2), 18px 0px 3px hsla(60, 80%, 50%,.8);
Figure 56: Three shadows—negative offsets, blur-only shadow, and two shadows with transparency.

C

text-shadow: 0 8px 4px #CCC; -ms-text-shadow: 0 8px 4px #CCC;

7

text-shadow: 0 -3px 1px #444;

W

text-shadow: 0 12px 9px #555;
Figure 57: Single-side shadows and how to control them.

T

Figure 58: An object and a single shadow.

S

Figure 59: Six stacked shadows, each with a different offset, result in a solid, 3-D look.

T

Figure 60: The 3-D letter with shadow. This element now has seven text shadows.