Drop Shadow Technique

I've been playing around with a nice css technique that I adapted from Duncan Orchard (it was written up in a modified form in A List Apart). It adds a bit of whitespace with a grey border and then frames it with a drop shadow (see "Obligatory Cute Cat Photo" at left). A variation can be used to put drop shadows on paragraphs.

The long and short of it is that you surround your image in a div tag with class="img-shadow"

<div class="img-shadow"><img src="cat.jpg" /></div>

which is defined thusly in a stylesheet:

.img-shadow {
  clear: both;
  float:left;
  background: url(/images/shadowAlpha.png)
                     no-repeat bottom right !important;
  background: url(/images/shadow.gif)
                     no-repeat bottom right;
  margin: 10px 7px 0 10px !important;
  margin: 10px 7px 0 5px;
}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
}

The article explains the technique better than I can, so I'll leave it at that.

Posted by Tom on September 22, 2004