Picture perfect

When I commented on implementing the “YDSF” CSS drop shadows for images here, Ginny noted that the solution she used was a bit simpler, requiring just a single div statement. Well, yeah, I thought to myself, but when I tried doing it a while back, I never could make it look right.

Well, duh, I must have been stupid that particular day, because I copied over the code from her stylesheet, which she got from the A List Apart article on CSS Drop Shadows, and …

… hey, that is easier. And it works.

I tweaked the code just a scosh, so that it has two versions, a left-aligned and a right-aligned. I tend toward the latter, but sometimes mix it up if doing multiple images in a post or multiple posts with images in them. And I further tweaked the margins so that the right-aligned images get a bit of white space on the left, and the left-aligned ones the same on the right.

The resulting code:

.img-shadow-left {
float:left;
background: url(/blog/images/decor/shadowAlpha.png) no-repeat bottom  right !important;
background: url(/blog/images/decor/shadow.gif) no-repeat bottom right;
margin: 10px 10px 0 10px !important;
margin: 10px 10px 0 5px; /* increase 2nd number +10 to add rt margin */
}
.img-shadow-left img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

.img-shadow-right {
float:right;
background: url(/blog/images/decor/shadowAlpha.png) no-repeat bottom  right !important;
background: url(/blog/images/decor/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 20px !important;
margin: 10px 0 0 15px; /* increase last number +10 to add left margin */
}
.img-shadow-right img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
} 

So if I want to take an <img> statement and work this particular magic, I just frame it as such:

<div class="img-shadow-right"><img="randominage.jpg"></div>

Sweet. And purty. And simpler to use than the YDSF code. And more flexible (by making a left- and right-aligned version I can customize the extra margin). And it behaves well on my machine in both Firefox and IE 6. (Well, bearing in mind that my IE 6 rendering is a bit wonky. I need to do something about that.)

I want to do a bit more testing, but I think this particular solution is a go.