Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Placing a Smooth Drop Shadow Behind an Image

Problem

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

Solution

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

First, create a new image in Adobe Photoshop that will act as a mask to soften the drop shadow image. Using the same dimensions as the drop shadow, delete the entire image content in the file, leaving only a transparent background.

Note

If you don’t have access to Photoshop, try an online version at https://www.photoshop.com/, or download a free digital imaging application such as GIMP (see http://www.gimp.org/).

Then, using the gradient tool, pick the gradient option that creates a fade from Background Color to Transparent, as shown in Figure 4-46.

Selecting the right gradient fade

Figure 4-46. Selecting the right gradient fade

Making sure that the background color in the Toolbar matches the background color used in the website, create a 6-pixel fade from the left edge of the canvas toward 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, as shown in Figure 4-47.

Saving the image as a PNG with alpha transparency

Figure 4-47. Saving the image as a PNG with alpha transparency

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

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

Adjusting the first CSS 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, as shown in Figure 4-48:

div.imgholder div {
 background: url(shadowmask.png) no-repeat;
 padding: 0 6px 6px 0;
}
The smooth edges now on the drop shadows

Figure 4-48. The smooth edges now on the drop shadows

Finally, add some padding and a border to the image, as shown in Figure 4-49:

div.imgholder img {
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #666;
    padding: 2px;
}
The image with a drop shadow, styled a bit more

Figure 4-49. The image with a drop shadow, styled a bit more

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 website.

Since Internet Explorer for Windows versions 5.5 through 6 do not natively support PNGs with alpha transparency, use the Solution from Using Transparent PNG Images with JavaScript.

See Also

Setting a Shadow on an Element with CSS for creating a simple drop shadow on an image

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required