Box Shadow and Text Shadow

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design, a good example being this year’s 24 Ways website (http://24ways.org).

1 -webkit-box-shadow: 10px 10px 25px #ccc;
2 -moz-box-shadow: 10px 10px 25px #ccc;
3 box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

Also, the text-shadow attribute is available for use on textual content:

1 text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).

As used by: 24 Ways (http://24ways.org).

See also: