Tutorials

CSS Entire Image Flexible Dropshadows

Create expandable, flexible css dropshadows that go around an entire image, are standards compliant and fully tested on all of the major browsers.

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 4x4 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;
}

.ds4 {
background:url(corner_bl.gif) left bottom no-repeat;
}

.ds5 {
background:url(top.gif) left top repeat-x;
}

.ds6 {
background:url(right.gif) right top repeat-y;
}

.ds7 {
background:url(corner_tl.gif) left top no-repeat;
}

.ds8 {
background:url(corner_tr.gif) right top no-repeat;
}

.ds9 {
background:url(corner_br.gif) right bottom no-repeat;
}

.ds10 {
padding: 4px;
}

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

Example

If this tutorial helped let me know, it will make me feel good.