This tutorial is a spin-off from A List Apart’s Onion Skinned Drop Shadows tutorial. If you wish to learn more about how this method works, please review A List Apart’s article. In their example they explain in great detail how it works but they only show you how to create a drop shadow on part of the image. In my example I will show you how to create an expandable, flexible, css drop shadow that goes around an entire image.

It may not be the prettiest method but it works and it sure beats adding a drop shadow to a pile of images. All of my drop shadow graphics are 4 pixels x 4 pixels and the selector .ds10’s padding is 4px. So if your drop shadow images are a different size all you need to adjust is the padding for selector .ds10 and you are all set.

Browsers Tested:
Internet Explorer (PC 6,7/Mac), Firefox (PC/Mac), Safari (Mac), Netscape Navigator (Mac) – feel free to add to the list.

CSS:
.ds1, .ds2, .ds3, .ds4, .ds5, .ds6, .ds7, .ds8, .ds9, .ds10 {
display:inline-table;
/* \*/display:block;/**/
}

.ds1 {
float:left;
}

.ds2 {
background:url(left.gif) left top repeat-y;
}

.ds3 {
background:url(bottom.gif) left bottom repeat-x;
}

.ds10 img {
display:block;
}

HTML:
<div class="ds1">
<div class="ds2"><div class="ds3"><div class="ds4">
<div class="ds5"><div class="ds6"><div class="ds7">
<div class="ds8"><div class="ds9"><div class="ds10">
<img src="images/teddy_bear.jpg" alt="CSS Dropshadow" />
</div></div></div>
</div></div></div>
</div></div></div>
</div>

Source Files:
Download HTML, CSS & Images

Example: