Drop shadows are effects that create a 3D-like appearance. The are most often associated with images. The photograph on the right is created with a drop shadow. It looks like it is floating a bit above the page.
There are many reasons why you may want to have drop shadows on an element of your Web page. For instance, there are drop shadows on the elements of this page. But, except for the photo above, all of them are created using Cascading Style Sheets. Applying a drop shadow to certain page elements, such as divisions (those 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.
It is important to point out that the term "drop shadow" is interpreted differently by the various browsers. For instance, a drop shadow in Firefox, Chrome, and Safari is an offset blurry effect. But the term "drop shadow" causes Internet Explorer to display hard edged shadow. This is illustrated on the right. The blurred offest effect is called "shadow" for Internet Explorer.
In this tutorial we are interested in the blurry drop shadow effect because it most closely resembles the traditional drop shadow that is created for images. As a result, the syntax that you will see on the following pages will refer to "drop shadow" for non-IE browsers, but "shadow" for Internet Explorer. You will see that the "shadow" property in Internet Explorer resembles an extrusion with a fade effect. Be sure to view all these pages in two or more browsers to see the differences.
On the right is another photo of the Pike Place Market sign. The main difference is that the drop shadow effect is created using CSS. 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.
To see how a "pure" drop 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.