Box Shadow and CSS3

written by: jason
Box Shadow and CSS3

Coming from a print background, I use drop shadows all the time. They look good (when not overused) and print well. Not to mention they are easy to create with practically a click of a button in Photoshop. On the web though, designers have to be VERY careful when using shadows. There are too many variables that we can’t control such as the resolution of the monitors of our visitors as well as browser that they are using. Plus, you always have to ask yourself why you need a drop shadow. Are you adding it just because you can, or is it helping the reader somehow. Right now, I have the opinion that shadows are OK on background images and logos, but I steer clear of using them on text. I just find it makes it way too hard to read. One more word of advice is to make the shadows SUBTLE. Do not use black (#000) as the color of your shadows.

OK, here’s the css code that will create shadows in Firefox 3.5+ and Safari 3+, Opera 10.5 and Chrome. Internet Explorer is still lagging behind 🙁

  1. -moz-box-shadow: 5px 6px 7px #d0d0d0;
  2. -webkit-box-shadow: 5px 6px 7px #d0d0d0;
  3. -box-shadow: 5px 6px 7px #d0d0d0;
-moz-box-shadow: 5px 6px 7px #d0d0d0;
-webkit-box-shadow: 5px 6px 7px #d0d0d0;
-box-shadow: 5px 6px 7px #d0d0d0;

-moz-box-shadow will create shadows in Firefox
-webkit-box-shadow is used for Safari and Chrome browsers
-box-shadow is used for Opera

The numbers: in the above example, the 5px is the horizontal offset. The 6px is the vertical offset, the 7px is the blur (gaussian) and the hexadecimal number is of course the color of the shadow. This will place the shadow to the bottom right of your object. Negative values for the horizontal and vertical offsets will place the shadow to the upper left of the object.

Easy-peasy.

Tags: , ,

Comments are closed.