Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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

Inside Sweepstakes

Win an iPad Mini. Enter to win now!