CSS3: Drop Shadows

CSS3 is exciting stuff. I really like the drop shadow feature because I was tired of always having to create new PNG files just to get the effect. Also, it's a pain trying to get the bottom lined up, and the right side of a div to all look right with the shadow. What a relief it is to let the browser figure it all out!

So, what are the tags?

Just like the CSS3 rotating text, each browser has its own tag. I haven't figured it out for Opera yet, but I'm sure that's ok. Very few people are using it anyways, right? So...here's the tags.

	filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)

	-webkit-box-shadow: 10px 10px 25px #ccc;

	-moz-box-shadow: 10px 10px 25px #ccc;

The first one, the filter is for IE (details), the webkit tag is for Chrome and Safari (details), and the moz-box-shadow tag is for Firefox (details).

Properties

Webkit and Mozilla

The properties are pretty simple. They pretty much go as follows:

	-webkit-box-shadow: offsetX offsetY blurRadius color

	-moz-box-shadow: offsetX offsetY blurRadius color

Internet Explorer

For IE, you can use a few different properties. The table below describes them... I took this straight from the MSDN page linked above.

In case you're confused, the attribute column is used if you're using Javascript to modify the elements, and Property is used in the actual CSS tag. Also, the Color property/attribute can be specified using #RRGGBB, rgb(0,0,0), or #AARRGGBB. So, you can still have a transparent drop shadow if you use the last one, and set the alpha code to your desired level.

Put it to use!

On this site, I have a few different locations in which I use the drop shadow. It shows up on the blockquotes throughout the site, and also on the headers that have the blue background (see the page title for example). What's neat is that they work in ALL browsers! The code I used for those is right here...

.dropShadow3 {

        filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#ccaaaaaa, OffX=3, OffY=3);

        -webkit-box-shadow: 3px 3px 5px #aaa;

        -moz-box-shadow: 3px 3px 5px #aaa;

}

To make things a little versatile, I made a class named dropShadow5, and dropShadow8, with each being different by the offset values. Feel free to do whatever you like, but that's how I did mine! Here's one more example for you...

<div class="dropShadow3">

  Here is some text to show the drop shadow!

</div>

And... here is it being outputted! (I added some styling to change the background and shorten it)