How to Add Drop Shadows to Box Elements

In addition to text shadows, CSS 3 gives you the power to add shadows to box elements, such as <div> tags. In the figure you see how drop shadows were used to set off sections, such as the aside, in this example page of the Jelly Rancher website.

Much like the text shadow, the first value tells the Safari browser the horizontal offset, the second represents the vertical offset, and the third value describes how blurred the shadow should be. Again, the default is 0, and if you don’t specify the blur, the shadow’s color is completely solid.

Here's the syntax for box drop shadows for WebKit browsers:

-webkit-box-shadow: horizontal vertical blur color;

An RGBa color gives you greater control over the shadow’s appearance because you can add transparency. Similarly, using the em measurement creates a shadow that adjusts better if the size of the text changes.

The following style adds a drop shadow to all <div> box elements on a page:

You can add drop shadows to text, <div> tags, and other elements by using CSS 3.
You can add drop shadows to text, <div> tags, and other elements by using CSS 3.
div {  -webkit-box-shadow: .15em .25em .5em rgba(27, 27, 27, .6);}
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.