CSS3 Box Shadow
In CSS3 "box-shadow"property used to display shadow to a box in the webpage.By giving values seprated by whitespace for box-shadow property you can apply styles to image or a box.
Syntax:
Here we have a syntax with example:
h-shadow : Required value which shows the horizontal shadow. Negative values also acceptable if it is needed.
v-shadow : Required value which shows the vertical shadow. Negative values also acceptable if it is needed.
blur : Optional value which is used to give the blur distance.
spread : Optional value which is used to give th size of the shadow. Negative values are allowed when it is needed.
color : Optional value which used to provide color to the shadow. Default value is black. You can use hex-decimal format or the name of the color or the RGB number to the value.
For cross-browser compability you can use example code as follows: -
Example 1 - shows a shadow to the left top by 5px.
#ex1{
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}
Example 2 - shows the same shadow with blur distance of 5px.
#ex2{
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}
