Recipe 2.25. Placing Shadow Behind Text

Problem

You want to place a shadow behind the text in a heading, as shown in Figure 2-41.

Figure 2-41. Instant drop shadows on HTML text

Solution

Use the text-shadow property to set the color and placement of the shadow:

h1 {  font-size: 2.5em;  font-family: Myriad, Helvetica, Arial, sans-serif;  width: 66.6%;  text-shadow: yellow .15em .15em .15em;  margin: 0 0 0.1em 0; }

Discussion

The first value of the text-shadow property sets the color. The first length unit value, .15em, moves the shadow on the x-axis relative to the position of the HTML text. The next value moves the shadow on the y-axis. The last value is the blur radius of the shadow. The larger the value the more disperse the shadow.

The only known browser that supports the text-shadow property is Safari.

Imagery used for this effect should be able to tile seamlessly, but also provide enough contrast so that the text is still legible.

See Also

Read more about the CSS 2.1 specification for text-shadow at http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props.