In the beginning, of course, I was lucky just to be able to get the damn things to appear properly. But once I got that under control, I started fretting over just how tacky a plain, unaccented image can look on a website. I explored a number of "frames" and for a while I was pleased with an understated outset border.
But then I was looking at the way images are previewed in Windows Explorer and was admiring the drop shadow, so I did some digging and here's what I found:
<img class="drop" src="img.jpg" />
img.drop {
box-shadow: 5px 5px 10px #D2D2D2;
}
Which looks something like this...
The breakdown is like this:
- first pixel count = x-axis off-set
- second pixel count = y-axis off-set
- third pixel count = blur distance
- color = color of shadow (d'uh)
