Recipe 3.19. Placing a Smooth Drop Shadow Behind an Image

Problem

You want to have soft edges for an image's drop shadow.

Solution

Adding another unsemantic div wrapper around another background image allows for the creation of soft edges on the drop shadows.

First, create a new image in Adobe Photoshop that will act as a mask to soften the drop shadow image used in Recipe 3.18. Using the same dimensions as the drop shadow, delete the entire image content in the file leaving only a transparent background. Then using the gradient tool, pick the gradient option that will create a fade from Background Color to Transparent (see Figure 3-47).

Figure 3-47. Selecting the right gradient fade

Making sure that the background color in the toolbar will match the background color used in the web site, create a six pixel fade from the left edge of the canvas towards the right side of the image.

Then repeat the creation of the fade, but this time create the fade from the top of the canvas to the bottom.

Next, save the image as a PNG-24 image with transparency (see Figure 3-48):

Figure 3-48. Saving the image as a PNG with alpha transparency

With the images set up, adjust the HTML to include a new div wrapper:

<div >  <div>    <img src="/books/3/27/1/html/2/dadsaranick2.jpg" alt="Photo of Dad, Sara, Nick" />   </div> </div>

Adjusting the CSS first image wrapper, float the image to the left, apply the drop shadow, and set some spacing between the image and the HTML content:

div.imgholder {  float: left;   background: url(dropshadow.gif) no-repeat bottom right;   margin: 0 7px 7px 0; }

Next, bring in the mask that will soften the drop shadow background as well as make room to display both the drop shadow and the mask (see Figure 3-49):

Figure 3-49. The smooth edges are now on the drop shadows

div.imgholder div {  background: url(shadowmask.png) no-repeat;   padding: 0 6px 6px 0; }

Finally, add some padding and a border to the image (see Figure 3-50):

Figure 3-50. The image with drop shadow is styled a bit more

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

Discussion

The hard part of this solution is creating a PNG with alpha transparency that works with the drop shadow and matches the background of the web site.

Since Internet Explorer for Windows 5.56 does not natively support PNGs with alpha transparency, use the Solution from Recipe 3.11.

See Also

Recipe 3.18 for creating a simple drop shadow on an image.