Introduction

Link Effects

Box Shadows

Curves

IMC Home Page

Defining Drop Shadows

Browser Issues

The biggest problem with box shadows is that they are implimented differently for each browser. Without going into technical detail, until recently the Web browsers fell into three general categories that are classified by the technology used to display pages.

However, starting in 2013 there has been some changes that have caused the these categories to become a bit more complicated. When this tutorial was originally created the CSS coding syntax is different for each of these three browsers categories. It was necessary to create three versions of the attributes for the drop shadows. Now, however, one style of syntax applies to all current browser versions. Creating CSS3 box shadows has become simpler.

A fall roadOn the right is a photograph with a simple box shadow applied to it. The syntax for the effect is:

box-shadow: 4px 4px 6px #999999;
-webkit-box-shadow: 4px 4px 6px #999999;
-moz-box-shadow: 4px 4px 6px #999999;

NOTE: Be sure to view this page in more than one browser so that you can see how each browser interprets the CSS rule.

To see how this syntax has to be written for older browser versions, touch your mouse pointer here.

box-shadow: 4px 4px 6px #999999;
-webkit-box-shadow: 4px 4px 6px #999999;
-moz-box-shadow: 4px 4px 6px #999999;

Creating the Box Shadows

You may apply the box shadow to many page elements such as images and divs. They can be applied to tables, too. We have applied the ID #FallRoad to the image. The entire CSS rule for this example is:

#FallRoad {
float: right;
box-shadow: 10px 10px 10px 4px #999999;
}

See the old-style CSS rule right here.

#FallRoad {
float: right;
box-shadow: 10px 10px 10px 4px #999999;
-webkit-box-shadow: 10px 10px 10px 4px #999999;
-moz-box-shadow: 10px 10px 15px 4px #999999;
filter:progid:DXImageTransform.Microsoft.
Shadow(color='#999999',direction='120',strength='6' }

Here is how each property:attribute line breaks down:

On the next page we will discover how the values of these attributes affect the display of box shadows.

< Return to Page 1 > < Continue to Page 3 >