The first thing you need to do is create the drop shadow graphic. I created my drop
shadow graphic using GIMP. Create a new GIMP file, the dimensions of
which are as large as the maximum size of your image. I created a file that’s 800 pixels by
800 pixels just to be on the safe side. Unlock the background layer and fill it with the color
you want your shadow to sit on. In my case I simply kept the background layer white.
Create a new layer and fill it with white.
<div class="img-wrapper"><img src="dunstan.jpg" width="300"➥
height="300" alt="Dunstan Orchard" /></div>
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
margin: -5px 5px 5px -5px;
}
You can create a good, fake photo border effect by giving the image a border and some
padding:
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -5px 5px 5px -5px;
}
This works for most modern, standards-compliant browsers. However, we need to add in a
couple of simple rules to get it working correctly in IE 6:
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}
Richard Rutter of www.Clagnut.com came up with a similar method for creating drop
shadows. Instead of using negative margins, his technique uses relative positioning to
offset the image:
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
3
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}
The padding on the image still does not display in IE 5.x, but in general browser support
for this method is good.
