01) 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
