HTML and CSS Reference
Adding Box Shadows
Images can look a bit harsh and adding a shadow can soften the look and make the page more visually appealing.
A shadow is easily added using the box-shadow attribute, which takes the following values:
Horizontal position - the position of the horizontal shadow. If negative, the shadow is on
the left side.
Vertical position - the position of the vertical shadow. If negative, the shadow is at the top.
Blur - the size of the blurred area just after the shadow.
Spread - the width of the shadow.
Color - the color of the shadow.
Inset - makes the image appear lower than the surrounding area causing the shadow be
on the image rather that outside the image.
The values are specified in a comma-separated list. It expects from two to four position/size values, an
optional color property and the optional inset keyword. Only, the first two are required, which are the horizontal
and vertical position. The blur and spread values will default to zero if not specified. Add the following rules to
the end of the style element:
/* Add the box shadow */
margin: 10px 0;
box-shadow: 3px 3px 12px #222;
margin: 10px 0;
box-shadow: 2px 2px 5px #444;
box-shadow: 3px 3px 3px #aaaaaa;
he .book img rule also includes both the margin-left and margin-right attributes, which are both set to
auto. This causes the images to be centered horizontally. Figures 4-12 and 4-13 show a close-up of the images in
the featured content and the side bar items. Notice the first image has a larger blur area than the sidebar images.
Figure 4-12. The shadow of the phone booth image in the featured content section