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.
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
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
For IE, you can use a few different properties. The table below describes them... I took this straight from the MSDN page linked above.
|color||Color||Sets or retrieves the value of the color applied with the filter.|
|enabled||Enabled||Sets or retrieves a value that indicates whether the filter is enabled.|
|offX||OffX||Sets or retrieves the value that the drop shadow is offset from the object along the x-axis.|
|offY||OffY||Sets or retrieves the value that the drop shadow is offset from the object along the y-axis.|
|positive||Positive||Sets or retrieves the value that indicates whether the filter creates a drop shadow from the nontransparent pixels of the object.|
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...
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...
Here is some text to show the drop shadow!
And... here is it being outputted! (I added some styling to change the background and shorten it)