HTML and CSS Reference
In-Depth Information
Adding the Divider Shadow
The final shadow we'll be adding to RecipeFinder is the divider that appears in between
the “Latest Recipes” column and the sidebar.
Figure 3.17
shows how it looks in our original
design.
Figure 3.17. The divider shadow between the main columns
We won't be able to reproduce that shadow using just CSS, with no images. So, in this in-
stance, we're going to revert to using an image, set as a background. After getting the image
out of our Photoshop design, the image will be added to the
.latest
section, on the back-
ground, like this:
.latest {
width: 640px;
float: left;
padding: 0 40px;
background: url(../images/bg-column.png) no-repeat top
