Adding drop down shadows to images or divs can always add a certain sparkle to any website.

There are a couple of ways to add shadows.

Using images as shadows

You can add an image of a shadow to your image; but doing it this way, you would probably want to preserve some sort of transparency, which will cause you a few problems. To do this you would need to make the image using a PNG-24 format, like i mentioned in my previous post. The problem with this is that IE doesn’t render the transparency.

There are also a few ways to solve this IE transparency problem, two of which don’t involve CSS; but rather, the creation of the images.

If your shadow PNG doesn’t need to be repeated, then use this method to get it to work in IE.

If you have a background color or pattern under the shadow, then you could just create the image with that color or pattern already under the shadow. Sounds easy enough, and it really is.

The last way is to use a not so nice looking shadow image, but it will allow you to preserve the transparency. This is what the shadow image will look like:

So basically its just an GIF image of alternating black and transparent pixels. The reason why the transparent pixels work in IE is because IE can only render binary transparency, which means it’s either transparent or not, there are no in between values.

Here’s the style sheet for the image method and I’ll be using the not so good looking shadow for IE6 and the PNG with transparency for everything else.

CSS:

<style type="text/css">
.shadow
{
    width:193px;
    height:91;
    padding:0 7px 8px 0;
    background:url(shadow.png)
        bottom right no-repeat;
}
*html .shadow
{
    padding:0 5px 3px 0;
    background:
        url(shadowIE.gif);
}
</style>

The simple HTML is:

<div class="shadow">
    <img src="image.jpg" />
</div>

This is what it should look like:

Using divs only

The way this works is using layers of divs on top of each other and each is offset by a pixel. The following stylesheet should make it clear, or confuse you even more.

CSS:

<style type="text/css">
#image-container {
    position: relative;
    width:193px;
}
.shadow2, .shadow3, .container
{
    position: relative;
    left: -1px;
    top: -1px;
}
.shadow1
{
    background:#CCC;
}
.shadow2
{
    background:#999;
}
.shadow3
{
    background:#666;
}
.container
{
    background:#fff;
}
</style>

Explanation:

I chose the three colors for the shadows based on a white background. You should choose colors relative to the background. Or you could make the divs transparent using the method I mentioned in my previous post involving transparent divs.

And here’s the corresponding HTML:

<div id="image-container">
    <div class="shadow1">
        <div class="shadow2">
            <div class="shadow3">
                <div class="container">
                    <img src="image.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>

This is what it should look like: