HTML and CSS Reference
In-Depth Information
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 */
article img
{
margin: 10px 0;
box-shadow: 3px 3px 12px #222;
}
.book img
{
margin: 10px 0;
display: block;
box-shadow: 2px 2px 5px #444;
margin-left: auto;
margin-right: auto;
}
aside
{
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
