Controlling the Effect
By changing the values of the property attributes, distance, spread, and color, you can control the appearance of your drop shadow. Here are some examples of what you can create:
NOTE: Be sure to view this page in more than one browser so that you can see how each browser interprets the CSS rule.
#Pirates1 {
box-shadow: 5px 15px 5px 5px #999999;
-webkit-box-shadow: 5px 5px 5px 5px #999999;
-moz-box-shadow: 5px 5px 5px 5px #999999;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999',direction='120',strength='5');
}
#Pirates2 {
box-shadow: 0px 0px 5px 5px #003333;
-webkit-box-shadow: 0px 0px 5px 5px #003333;
-moz-box-shadow: 0px 0px 5px 5px #003333;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#003333',direction='0',strength='5');
}
#Pirates3 {
box-shadow: 12px -8px 9px 5px #666600;
-webkit-box-shadow: 12px -8px 9px 5px #666600;
-moz-box-shadow: 12px -8px 9px 5px #666600;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#666600',direction='45',strength='10');
}
The best way to learn how to apply the CSS drop shadow features is to try them and experiment with the specifications. They are easy to use and with some practice you will become proficient with their application.
< Return to Page 2 >