Defining Drop Shadows
Browser Issues
The biggest problem with drop shadows is that they are implimented differently for each browser. Without going into technical detail, the Web browsers fall into three general categories that are classified by the technology used to display pages.
- Trident - Used by Internet Explorer
- Webkit - Used by Safari and Chrome
- Gecko - Used by Mozilla-based browsers such as Firefox
At the time of this writing the CSS coding syntax is different for each of these three browsers. It is necessary to create three versions of the attributes for the drop shadows. At first this seems like a lot of work, but as you will see, it is not particularly diffucult.
On the right is a photograph with a simple drop 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.
Creating the Drop Shadows
You may apply the drop 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;
-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:
- float: right; - simply tells the image #FallRoad to float to the right side
- box-shadow: 10px 10px 10px 4px #999999; - a general property specification for browsers that are not Internet Explorer, Firefox, Chrome, or Safari
- 10px - sets the distance that the shadow moves to the right
- 10px - sets the distance that the shadow moves down
- 10px - sets the amount of blur
- 4px - sets how far the shadow spreads
- #999999 - the color of the shadow
- -webkit-box-shadow: 10px 10px 10px 4px #999999; - property specification for Webkit browsers such as Safari and Chrome
- 10px - sets the distance that the shadow moves to the right
- 10px - sets the distance that the shadow moves down
- 10px - sets the amount of blur
- 4px - sets how far the shadow spreads
- #999999 - the color of the shadow
- -moz-box-shadow: 10px 10px 10px 4px #999999; - property specification for Mozilla-based browsers such as Firefox
- 10px - sets the distance that the shadow moves to the right
- 10px - sets the distance that the shadow moves down
- 10px - sets the amount of blur
- 4px - sets how far the shadow spreads
- #999999 - the color of the shadow
- filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999',direction='120',strength='6'); - property specification for Internet Explorer
- color='#999999' - the color of the shadow
- direction='120' - the direction in degrees that the shadow is projected. For example, 0 is straight up, 180 is straight down, 120 is down and to the right
- strength='6' - the distance that the shadow extends
On the next page we will discover how the values of these attributes affect the dispaly of drop shadows.
< Return to Page 1 > < Continue to Page 3 >