HTML and CSS Reference
Figure 4-16. Multiple shadows on text produce a variety of effects without the need for images
Multiple shadows are rendered with the first one on top and each subsequent one painted behind its
predecessor. So, if you want shadows to overlap, smaller ones must be listed first.
Creating Raised and Inset Text
To create the raised and inset letterpress effect similar to the one on the left of Figure 4-16 , you need to choose
four related colors ranging from light to dark. The lightest and darkest colors are used for the shadows. Use the
darker of the remaining colors for the text, and the lighter one for the background.
I used the following colors to create the effect in Figure 4-16 :
#FFE79B Light yellow (shadow)
#FFE79B Mustard (background)
#CCAA3F Dark mustard (text)
#7F744D Brown (shadow)
For a raised effect, use the lightest color to create a 1px shadow to the top left of the text, and the
darkest color to the bottom right. For an inset effect, use the colors the other way round. The styles in
text-shadow multi.html look like this:
text-shadow: -1px -1px #FFE79B, 1px 1px #7F744D;
text-shadow: -1px -1px #7F744D, 1px 1px #FFE79B;
■ The contrast between the text and background color might not be sufficient for users with color blind-
ness or partial vision. This technique is best reserved for decorative effect on nonessential text.