CSS can be used to create a shadow around a div, or table.
The box-shadow property is supported by IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. The standards are not finalised and you may need to handle each browser individually. The CSS code is box-shadow:
box-shadow: 8px 10px 5px #c0c0c0;
For a div having class of rOverlay the CSS border code is:
.rOverlay{
box-shadow: 8px 10px 5px #c0c0c0;
-webkit-box-shadow:8px 10px 5px #c0c0c0;
-moz-box-shadow:8px 10px 5px #c0c0c0;
-o-box-shadow:8px 10px 5px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.dropShadow(color=#c0c0c0, offX=8, offY=10, positive=true);
}
In the above the browsers handled are generic standard, Apple Safari, Mozilla, Opera and Internet Explorer respectively.
The declarations for the shadow are based upon
offset x, offset y, blur, colour
A further two parameters are available:
- spread – positioned before the colour. This determines the size of the shadow.
- inset – positioned last, tells the browser to render the shadow inside of the object. Doesn’t work for Internet Explorer.
Note that the DocType needs to be declared as being either xhtml or html
