CSS3

• Home / CSS3 Previews / Box-shadow, one of CSS3′s best new features

Box-shadow, one of CSS3′s best new features

The CSS3 backgrounds and borders module has a nice new feature called box-shadow, which is implemented in Safari 3+ and Firefox 3.1 (Alpha). The specification speaks of multiple shadows, but the author already “has his doubts” on that, and it isn’t implemented in Safari 3.

The property takes 3 lengths and a color as it’s attributes, the lengths are:

1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The shadow should be following curved corners created with border-radius. For those of you without a supporting browser, here’s a screenshot.

There should be a nice grey fading shadow under this box…

The CSS code for this is:

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

There should be a hard black shadow above this one, and the shadow should follow the rounded corners.

The CSS code for this is:

box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;