The CSS3 has many features. Box-shadow is the new feature of the backgrounds and borders module which works in Firefox 3.1(Alpha)and Safari3+.
The property takes 3 lengths and a color as it’s attributes, the lengths are:
- the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left
of the box;
- the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the
box;
- the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
HTML Code is as follows:
<p id=”box-shadow”>Welcome to Web Designer Harshal Sawant’ Blog. Enjoy web design with me.</p>
CSS class is as follows:
#box-shadow {
margin: 10px 0;
box-shadow: 10px 10px 0px #333;
-o-box-shadow: 10px 10px 0px #333;
-icab-box-shadow: 10px 10px 0px #333;
-khtml-box-shadow: 10px 10px 0px #333;
-moz-box-shadow: 10px 10px 0px #333;
-webkit-box-shadow: 10px 10px 0px #333;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;
border-radius: 5px;
-o-border-radius: 5px;
-icab-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
Use -moz- and -webkit- prefix for box-shodow to support cross browsers. For Opera -o- added In the above code, -moz is for Firefox and -webkit- is for Safari and Chrome also -icab- and -khtml- are the render engine prefixes use for cross browsers.
