Recipe 10.9 Placing a Drop Shadow Behind an Image

Problem

You want to place a drop shadow behind an image as shown in Figure 10-22.

Figure 10-22. A drop shadow is placed behind the image

Solution

Place the image element (as shown in Figure 10-23) inside a div element with the class attribute set to imgholder:

<div class="imgholder"> 
 <img src="dadsaranick2.jpg" alt="Photo of Dad, Sara, Nick" /> 
 </div>

Figure 10-23. The image placed above the content

To the div use an image with an alpha transparency like PNG:

 
 margin: 10px 0 0 5px; 
}

a more dramatic effect:

div.imgholder img { 
 display: block; 
 position: relative; 
 background-color: #fff; 
 border: 1px solid #666;
 margin: -3px 5px 5px -3px; 
 padding: 2px; 
}

Discussion

The first step is to create a drop shadow image in your image-editing program like Adobe Photoshop. It's best to create a background image sized 600 pixels by 600 pixels or larger. With the image that large, this technique can accommodate almost any image used in a web page.

The first image background property uses the !important rule to display the PNG file as the drop shadow. By using the PNG, the background color or image of the web document can be changed without affecting the drop shadow. For the other browsers that don't support this rule, like Internet Explorer for Windows,) go to the next background property and use the GIF image as the drop shadow instead.

The margin-left and margin-bottom property in the image element control the distance the drop shadow image appears out from the image. If your drop shadow distance on the right or left side is larger than five pixels (like the one used in this Solution), change the value accordingly.

See Also

The A List Apart article on creating CSS Drop Shadows at http://www.alistapart.com/articles/cssdropshadows/.