Articles - Design entries

CSS3: Drop Shadows

6 comments | Published on Monday, October 12, 2009 8:58 pm

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

1 comment | Published on Sunday, October 11, 2009 4:56 pm

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.