• Reported by Alessandro

Drop Shadows are a nice way to beautify images. There are many articles on them:

• CSS Drop Shadows
• CSS Drop Shadows II
• Easy CSS Drop Shadows
• CSS Drop Shadows Test

In this article, we'll see yet another technique. Most of the existing techniques use negative margins, while I've presented almost one year ago on pro.html.it, the italian portal I write for, a really simple version wich uses relative positioning. Thought I'd share it here, with some variations.

Let's see the example page I've prepared: all the examples share the same markup and the same background image. Here's the markup:

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

Now, the CSS. The div that contain the image is floated left, and a 6 pixels padding is specified on bottom and right sides to leave room for the background image. Then the image is shifted 3 pixels up and left by using relative positioning with negative values, and a white frame with grey border is added to get a nicer effect. Here's the CSS, with key declaration emphasized:

div.shadow{float: left;padding: 0 6px 6px 0;
    background: url(dropshadow.png) no-repeat bottom right}
div.shadow img{display: block;position: relative;
    top: -3px;left:-3px;padding:5px;background:#FFF;
    border:1px solid;border-color: #ccc #666 #666 #ccc}

A small mathematics note: to get full benefits from the drop shadow image, wich is 9 pixels thick, the sum value for bottom padding of the div and top coordinate of the image in absolute value should be exactly 9 pixels in this case. The same goes for right padding of the container and left coordinate for the image.

For instance, to get a more deep drop shadow, we'll simply lower padding and shift more the image. It's the case of the example two. Here's the CSS:

div.shadow{float: left;padding: 0 2px 2px 0;
    background: url(dropshadow.png) no-repeat bottom right}
div.shadow img{display: block;position: relative;
    top: -7px;left:-7px;padding:5px;background:#FFF;
    border:1px solid;border-color: #ccc #666 #666 #ccc}

To get a subtle, lighter drop shadow, simply use just a part of the drop shadow image, like I did in example three. In this case, I've just exploited 6 pixels of the thickness of the drop shadow image:

div.shadow{float: left;padding: 0 4px 4px 0;
    background: url(dropshadow.png) no-repeat bottom right}
div.shadow img{display: block;position: relative;
    top: -2px;left:-2px;padding:5px;background:#FFF;
    border:1px solid;border-color: #ccc #666 #666 #ccc}

Finally, we can also get an unbalanced drop shadow, lighter on right side and darker on bottom:

div.shadow{float: left;padding: 0 3px 5px 0;
    background: url(dropshadow.png) no-repeat bottom right}
div.shadow img{display: block;position: relative;
    top: -4px;left:-2px;padding:5px;background:#FFF;
    border:1px solid;border-color: #ccc #666 #666 #ccc}

The support of the tecnique should be quite good. The examples have been tested in Opera 7.6, Firefox, IE5, IE5.5 and IE6 and Safari. In IE5.x drop shadow are ok, but the white frame around images are not displayed. I believe this is not a bug of these browsers, but just a different rendering matter, since images are in fact replaced elements.

Finally, the technique could also be applied to get floating thumbnails with dropshadows and on divs and other block-level elements.