Designing with CSS – Box Shadow

Box-shadow is one of CSS3′s best new features. CSS3 gives you a nice box shadow with box-shadow property.
 

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 property. Box shadows may also be used with the ::first-letter pseudo-element, but not the ::first-line pseudo-element.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

In the previous article I illustrated generation of code for rounded corners using border-radius property of CSS3 with the help of this tool.

In this article I shall illustrate generation of code for box shadow using box-shadow property of CSS3 with the help of this tool. The procedure is simple. You chose your design element from the drop-down menu, enter your values, and get your auto-generated code for your project.

Your Code:

-webkit-box-shadow:10px 8px 3px;
-moz-box-shadow:10px 8px 3px;
box-shadow:10px 8px 3px; 

Browser Compatibility:

Firefox 3.5+ Chrome 4.0+ Safari 3.1+ Opera 10.5+

Example of Box with Shadow

This example uses the CSS3 box-shadow property and currently it will not work in all browsers.

CSS Code:

.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
.boxshadow {box-shadow:10px 10px 5px #888;-moz-box-shadow:10px 10px 5px #888;-webkit-box-shadow:10px 10px 5px #888}

HTML:

<div class="box corner boxshadow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

Examples: