"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

Articles - Design entries

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:

CSS3: Rotating Text

If you look at my home page, or on the Articles page, you'll see that the dates are rotated. How do we do that? Well, with a little bit of simple CSS styling, it's quite easy! The hard part is working with positioning... But, we'll try to go over that here!

The CSS Code

In case you're just here to see the CSS code, it's just below. Under it, I've got a very simple tutorial on how to use it.


-moz-transform:rotate(270deg);
-webkit-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

This code creates the rotation used on my site for the date elements. It rotates the text so the bottom is facing to the right.