Link Effects

Box Shadows


IMC Home Page

Box Shadows

The famous pig sign at the Pike Place Market in Seattle

Box shadows are effects that create a 3D-like appearance. When created with graphics programs, such as Photoshop, they are usually called "drop shadows." They are most often associated with images, but can be applied to just about anything. The photograph on the right is created with a drop shadow using Photoshop. It looks like it is floating a bit above the page.

There are many reasons why you may want to have box shadows on an element of your Web page. For instance, there are box shadows on the elements of this page. But, except for the shadow on the photo at the right, all of them are created using Cascading Style Sheets. Applying a box shadow to certain page elements, such as divisions (segments of code made with the div tag) is very difficult unless they are made with CSS. Without CSS, a special "shadow image" has to be created, and then it must be cleverly placed in the proper position so that it repeats in exactly the correct way up and down the edges of the div.

But the Cascading Style Sheet drop shadow rule can be applied to nearly any page element and special images are not required. Customizing the shadow is relatively simple. You can control the spread and color by changing the attribute values.

The CSS rules for this div feature the "box shadow property" for all browsers. View this in Internet Explorer and other browsers (such as Firefox, Safari, and Chrome) to see the difference.

It is important to point out that the term "box shadow" is interpreted differently by the various browsers. For instance, a box shadow in Firefox, Chrome, and Safari is an offset blurry effect. But the term "box shadow" causes Internet Explorer to display hard edged shadow. This is illustrated on the right.




The Pike Place Market sign without the drop shadow

On the right is another photo of the Pike Place Market sign. The main difference is that the drop shadow effect is created using CSS3. Notice that the shadow looks very similar to the one in the upper photograph.

Various browsers tend to display drop shadows differently from each other. View this page with other browsers see how the effect looks. In this tutorial you will learn how to make adjustments for the different browsers.



This is a simple div but the way that it is displayed is radically different from browser to browser. View this in Firefox, Chrome, Opera, and current versions of Internet Explorer and see that the drop shadow is applied to the div itself. View this with old Internet Explorer (if you can find a copy of IE6, try it) and see that the drop shadow is applied to this text in the div, but not the div itself!

To see how a "pure" box shadow looks, there is a blank div on the right. It does not have a background, color, border, or other attributes other than size, and float. We have applied the drop shadow to it as a class. But the way the effect is displayed varies from browser to browser.

On the following pages you will learn how to set up drop shadows and how to customize them for various applications.





< Continue to Page 2 >