After seeing what Google did with Google Images, I thought, “OK… time to find a cross-browser way of doing drop shadows.” I was expecting to find something that combined CSS, HTML, and possibly some JQuery (which has some plugins for doing drop shadows, but none that really struck me as adequate for my project’s needs).
So then I found a reference to this blog post by Robert Nyman:
Drop shadow with CSS for all web browsers – Robert’s talk
…which includes a very simple CSS rule that seems to work in the following browsers:
- Firefox 3.5+
- Safari 3+
- Google Chrome
- Opera 10.50
- Internet Explorer 5.5+
…and here’s a quick look at the final product (with some extra commentary from yours truly…):
.shadow {
/* firefox, mozilla, et al. */
-moz-box-shadow: 3px 3px 4px #000;
/* webkit: safari, chrome */
-webkit-box-shadow: 3px 3px 4px #000;
/* css3 */
box-shadow: 3px 3px 4px #000;
/* For IE 8 (concatenate on one line) */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(
Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 (concatenate on one line) */
filter: progid:DXImageTransform.Microsoft.Shadow(
Strength=4, Direction=135, Color='#000000');
}
I’m thinking that with some tweaking of the colors I can get what I’m really after, and this should integrate nicely with some relatively simple JQuery scripting as well.
We shall see… if it doesn’t work out I’ll post a follow-up.