CSS Picture-Frame Drop-shadow treatment for images

I had come up with a way to add drop shadows to images using CSS and a background image. I’d run across several methods on the internet and sort of frankensteined them together to form my own.

For a better an idea of what I am getting at, note the following 2 images:

Without Treatment	With Treatment

Pretty spiffy eh? Let me give you the code that creates this effect…

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.img_wrap_outer {
	float: left;
	background: url( ../images/shadow.gif ) no-repeat bottom right;
	margin: 5px;
}
.img_wrap_inner {
	float: left;
	background-color: #FFFFFF;
	border: 1px solid #a9a9a9;
	padding: 12px;
	position: relative;
	left: -5px;
	top: -5px;
}

The HTML

1
2
3
4
5

<div class="img_wrap_outer">
         <div class="img_wrap_inner">
                  <img src="http://www.nothingproductive.com/wp-content/images/kitty_schlurp.jpg" border="0"  />
          </div>
</div>

The background image: shadow.gif

You may have issues caused by the float property of the outer & inner divs but nothing a “clear: both” can’t handle.

So I hope this will help you in your graphic-design endeavors. It took me a while to come up with this and have it work across all of the more popular browsers (IE 5.5/6/7, Firefox, and Opera).

By all means leave me some comments if you have them, I’d love to hear from ya!

Technorati: HTML, CSS, CSS Picture Frame, CSS Drop Shadow, Picture Frame, Drop Shadow, Shadow