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;

}

Example 3 - shows the same shadow with spread distance of 5px.

#ex3{

-moz-box-shadow: -5px -5px 0 5px #222;

-webkit-box-shadow: -5px -5px 0 5px#222;

box-shadow: -5px -5px 0 5px #222;

}

Example 4 - Shows the same shadow with no h-shadow and v-shadow only with blur and spread distance of 5px.

#ex4{

-moz-box-shadow: 0 0 5px 5px #222;

-webkit-box-shadow: 0 0 5px 5px#222;

box-shadow: 0 0 5px 5px #222;

}