ENHANCING BOXES WITH CSS3 BLING - Practical CSS3: Develop and Design - page 114

FIGURE 4.7 A more pronounced
box shadow produces a nice
lift (left).
FIGURE 4.8 An RGBA color
gives the box a natural-looking,
more subtle shadow (right).
Using more offset and blur produces a more striking effect:
border-radius: 10px;
box-shadow: 5px 5px 10px black;
The box now looks like it has truly been lifted into the air ( Figure 4.7 ):
But something about the box just doesn't look right. The shadow is rather
unnatural. Usually, shadows have a tint of the color of whatever is below them
peeking through. But never fear; you can achieve this look easily using an RGBA
color ( Figure 4.8 ):
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);