CHAPTER 10 ■ STYLING TEXTText Shadow
Problem You want to place a shadow behind text.^
Solution All major browsers support the CSS property text-shadow, except Internet Explorer, which
provides a proprietary property called filter:shadow that causes your CSS not to validate.
In Safari, use text-shadow to add a shadow to text:
COLOR is the color of the shadow.
X-OFFSET is the horizontal offset of the shadow.
Y-OFFSET is the vertical offset of the shadow.
DIFFUSION is the amount of blur. Greater values make greater blur.In Internet Explorer 6, use filter:shadow to add a shadow to text:
COLOR is the color of the shadow.
DIRECTION is the direction of the shadow: 0 = top, 45 = top right, 90 = right, 135 = bottom
right, 180 = bottom, 225 = bottom left, 270 = left, 315 = top left.
SIZE is the size of the shadow in pixels.
Use zoom:1 to trigger the shadow effect in Internet Explorer. Internet Explorer 6 requires a
block to have layout before it applies filter effects to it. zoom:1 triggers layout. Layout is a
proprietary feature specific to Internet Explorer. Layout is discussed in the Atomic design
pattern in Chapter 7.Pattern SELECTOR { text-shadow:COLOR X-OFFSET Y-OFFSET DIFFUSION;
filter:shadow(color=COLOR, direction=DIRECTION,
strength=SIZE); zoom:1; }
Location This pattern applies to block elements. Specifically, text-shadow applies to all elements,
and filter:shadow applies only to block elements.
Limitations With both text-shadow and filter:shadow, this pattern works in all recent browser
versions.
I include this design pattern because it doesn’t hurt to use text shadows when a browser
doesn’t support it. The shadow effect is nonessential.
Avoid using shadows to create special effects (such as an eclipse) where color and
background-color are the same, because this makes for invisible text in browsers that don’t
support shadows.
If you assign a border to the shadowed block element, Internet Explorer 6 puts a shadow
around the border and the text inside it.
Tips A shadow effect around text makes the text bolder and causes it to stand out from its
background. Shadows work best for headings and for text overlaying background images. A
subtle shadow enhances readability, and a strong shadow makes text harder to read.
Related to Font