I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows. I love the appearance of having graphical elements appear to be just a tiny bit off “the page” and casting a slight shadow. Problem is, I don’t want to be stuck having to redo every single graphical element to add a drop shadow in PhotoShop. Is there a CSS way I can accomplish a drop shadow?
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:
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:
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.