upr00ted

I’m in the process of bringing one of the sites I develop up to XHTML compliance, and decided it would be fun to try some CSS tricks as well. Going from a heavily table based layout, with code that is sometimes 6 years old or created by Word to CSS has had its little glitches and SNAFUs but, now that it is basically done I decided to add drop-shadows to the many images displayed on the site.
The interesting thing with this site is that it only has a handful (maybe 5) images that shouldn’t have a shadow applied so I didn’t want to go through and wrap all 300 or so other image tags in a div because I didn’t see any reason to.
After a few tries here is what I came up with:
img {
background: url(/parts/images/shadow.gif) no-repeat bottom right;
padding: 0px 5px 5px 0px;
}
This adds the drop shadows using a simple gif that is clear except the last 5 pixles on the bottom and right where it fades from black to the background color of the site. Here is a Photoshop version of that gif so that you can change the background color to fit your needs.
The real trick was taking the shadow off of the other images without having to add much code, luckily they were mostly already wrapped in divs so I just told those to have no padding and gave them an empty image to display as a backround. (It didn’t work to specify background-image: none which is what I would have liked to do. Any thoughts?)
Then for those couple of other images that were just floating out in never never land, I made a class noshadow:
img.noshadow {
padding: 0px;
background-image: url(/parts/images/empty.gif);
}
I suppose the padding:0px is overkill, but for my purposes it didn’t matter.