Add shadows to boxes with HTML 5.0 and CSS 3.0

1) Hi! lets learn how to drop shadows for the boxes. First let's create a simple box in html

<!doctype html>
<html>
<div>Hi this is a box</div>
</html>

2) Now lets give it a width, height and background-color to style a box. So in our CSS code

div{
width:300px;
height:200px;
background:#b56969;
}

3) Now we have a box, lets try adding a shadow to it, so in our css div code add-

div{
width:300px;
height:200px;
background:#b56969;
box-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

4) It will cast a shadow for the box, lets discuss the box-shadow property. It needs minimum 4 parameters, x-axis-value, y-axis value, density of shadow, color.

i.e --> box-shadow:x-axis-value y-axis-value density color;

5) But there is a catch, for different brosers we have to add prefix in box-shadow property.

i) For chrome --> -webkit-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
ii) For mozilla --> -moz-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
iii) For IE --> -ms-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
iv) For Opera --> -o-box-shadow:2px 2px 1px rgba(0,0,0,0.5);

that's it, below is the full code for box shadows,

a) HTML code

<!doctype html>
<html>
<div>Hi this is a box</div>
</html>

b) CSS code

div{
width:300px;
height:200px;
background:#b56969;
box-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

thats it play with the above code for awesome box shadows