Until I started doing some research about what's been added in CSS3, the latest version of the cascading style sheets that have done such a good job of improving the appearance of content, I would have said that you could jury-rig something with divs around divs, but it'd never really have that proper "fuzzy" drop-shadow look. And I'd have been wrong.
In fact, there's a very nice new feature added in the latest version of CSS -- and supported only in the latest versions of popular Web browsers -- that lets you add a drop shadow to just about any container on the page, whether it's a graphic or even a text box or other display container.
Depending on how über-compatible you want to be, it can also be something you slap inline on an IMG tag, DIV tag or similar, though making it a separate CSS class or ID allows you the space to have maximum compatibility.
Let's start with the basics. Here's an image:
Not too exciting, but a good test graphic. I've applied no CSS styles at all to the image, and it can definitely improve with a 1-pixel black border:
That's done with the addition of style="border:1px solid black;" to the IMG tag. But what if we want to add a drop shadow too? That's done with another CSS attribute: box-shadow. Its attributes are a bit confusing, though, because they're just a string of values, similar to the border CSS shortcut. Here's what I'll add:
box-shadow: 5px 5px 7px #666
and here's the terrific result:
In order, the values are the horizontal offset of the shadow, the vertical offset of the shadow, the blur or diffusion, and the base color. You can experiment with these values or learn more about other attributes to box-shadow.
What makes this really cool is that you can apply these box drop shadows to any CSS container, so I can use it for a text box:
This is a text container - a div - that has its grey drop shadow and pale pink background graphic both supplied by CSS attributes. Handy, quick, and something you can apply across quite a lot of elements if you have a shared CSS style sheet!
The style I'm using with the above text box is: style="box-shadow: 5px 5px 10px #999;border:3px solid #060;padding:7px;background:#fee;font-size:125%;"
See what I'm doing there? "#999" is medium grey, "#060" is dark green and #fee" is light red.
If you separate value sequences with a comma, you can also specify more than one drop shadow box at the same time. Here's one result that's delightfully colorful:
This is a text container - a div - that has its grey drop shadow and pale pink background graphic both supplied by CSS attributes. Handy, quick, and something you can apply across quite a lot of elements if you have a shared CSS style sheet!
In this case, I've added two drop shadows, one yellow, one green, with the same statement by separating the value string with a comma:
style="box-shadow: 15px 15px 10px yellow, -15px -15px 10px #0c0;margin:25px;border:3px solid #060;padding:7px;background:#fee;font-size:125%;"
Notice I've also added a big margin -- 25px all around -- to ensure that there's space allocated for the drop shadow. If you forget that, other content will appear over the shadow, which can be a cool effect but could also adversely affect readability.
That's it for my examples. There are more complex ones on various CSS reference sites.
I hope that helps you see how you can indeed add drop shadows just using CSS.
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Thanks for this lovely bit of script. You say it works only in the latest versions of popular browsers and indeed I made it work in Firefox, but not in IE8. I'm using Windows XP in a virtual machine on a Mac, so I can't get a later version of Explorer and presumably there's nothing I can do about it, except hope that clients will have the latest thing (unlikely).