CSS Tutorial - Learn CSS - CSS3 Drop Shadow

With CSS3 now in it's 4th year, it's becoming more and more common and compatible with upgrades to the major browsers. In this article i'm going to give you a tutorial on how to implement drop shadows using css3.

The Box shadow

You no longer have to worry about making an image for your drop shadows or needless extra divs from the css2 way of adding shadows to boxes. You can change the size of the shadow, the colour, the blur and the offset. Most of the top modern browsers support this property but only the recent versions(Firefox, Safari, Chrome, Opera and IE9)

So here's how...

In your style sheet create an id or class and give it name and add the box-shadow property like so:

Not all browsers will work from this alone so you have to add some prefixes for the various browsers (-moz-, -webkit-)

Here is a brief explanation of the values - the first value is the horizontal offset, the second is the vertical offset, the third is the optional blur distance and optional spread distance of the shadow and the last is the colour of the drop shadow.

The definition of values:

Horizontal Offset
This value defines the horizontal offset of the shadow. When you add a positive value this will offset the shadow to the right. To offset to the left add a negative value i.e -6px.

Vertical Offset
This value defines the vertical offset of the shadow. When you add a positive value the shadow will be offset at the bottom, a negative value will offset it upwards.

Blur distance
This value defines the blur distance of the shadow. Only positive values are accepted and the larger the number the more blurry your shadow will be. This value is optional.

Spread Distance
This value defines how far out your shadow goes from the border. A positive value will expand your shadow in all directions. A negative value will contract the shadow.

Examples:

Below is the CSS code for each of these boxes:

I hope you have found this article helpful. Remember don't be scared just because not all browsers support CSS3 yet doesn't mean the recent browsers can't enjoy the fruit CSS3 has to offer.

If you are in need of some website design please visit Artisan Websites.