Putting it All TogetherListing 10-28. Revising the .page-title class to add text-shadow and a bottom border
.page-title {
font-size: 2.25em;
margin-bottom: .35em;
padding-bottom: .15em;
border-bottom: 1px solid #0cf;
text-shadow: 1px 2px 1px rgba(0,0,0,0.5);
}
Figure 10-24. The redecorated page title, now with a drop shadow
As you’ve seen, it’s easy to create simple, realistic drop shadows, but you’re certainly not limited to
simulating natural lighting. Clever application of the text-shadow property can also produce some really
impressive graphic effects, like you see in Figure 10-25. With no offset and a generous blur, a light-colored
shadow can appear as a luminescent glow against a dark background. Combined with RGBA colors,
multiple text shadows can produce overlapping, translucent duplicates. You can stack multiple shadows
and render a dramatic 3D effect by slightly adjusting the color and offset of each shadow in the stack.
Experiment with text-shadow and see what it can do. Just always remember that older browsers won’t
render these shadows, so make sure your text will still be readable even without them.
Figure 10-25. A few examples of text-shadow in action