How-to: CSS3 shadow effects – Part Two

Posted by Stuart Shields | Posted on May 17, 2011 | In CSS3

In the 2nd part of our two-part series: CSS3 shadow effects, we show you how to apply several different box shadow effects to your content.

How to Create a Box Shadow

Box Shadow will work in Internet Explorer 9, Firefox 4, Google Chrome 8 (I believe) and Opera. Unfortunately at the time of writing and testing Safari does not support this css3 tag unless you use -webkit-box-shadow.

CSS3 Box Shadow

The Code

box-shadow: 5px 5px 5px #ccc;

The break down

From left to right here is the break down of the box-shadow attributes:

• X-Coordinate
• Y-Coordinate
• Blur Radius
• Color of the shadow

 

Additional Effects

Adding the spread distance to the shadow

The code

box-shadow: 5px 5px 5px 5px #ccc;

The break down

Just after the Blur Radius we’ve added the Spread Distance.

Inner Box Shadow effect

The code

box-shadow:inset 5px 5px 5px 0px #ccc;

The break down

Everything is the same except all we’ve added is the keyword “inset”.

Offsetting the code

The code

box-shadow: -5px -5px 5px 0px #ccc;

The break down

With this code we’ve just change the X and Y Coordinates to be negative so they’ll show on the opposite side of their original position.

Multiplying box shadows

The code

box-shadow: 2px 2px 2px 0px red, 5px 5px 5px 0px blue;

The Break down

By Copying the X Coordinate, Y Coordinate, Blur, Spread and Color and also adding a comma (,) you can duplicate as many box shadows as you like on the one item.

Conclusion

Box Shadows are a new thing and everyone will be trying them out in their designs, what it comes down to is how you apply these effects to those designs. Just please for the love of God don’t over use and abuse this effect.