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.
| Attribute | Property | Description |
|---|---|---|
| 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. |
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)
Popular content
11:52 pm
Drew
CSS, so pretty! Let's hope Microsoft switches over to an engine more like Mozilla's Gecko so IE can actually render pages correctly! As a web dev myself, I hate 'making' 2 websites just because Microsoft doesn't know how to interpret tags.
12:01 am
mikesir87
I know the feeling! I'm starting to just add CSS3 stuff, and if someone has IE, they just get the square corners, no shadows, etc. At least CSS3 degrades gracefully like that (for certain tags anyways).
7:00 am
rahul ninja
I pair the intuition! I'm starting to right add CSS3 poppycock, and if someone has IE, they vindicatory get the form corners, no shadows, etc. At minimal CSS3 degrades gracefully equal that (for predestined tags anyways).
Post new comment