box_shadows1

BOX SHADOW using CSS3

Its very easy to drop shadow of different elements on a web-page using box-shadow feature of CSS3. Following is the example showing how to use box shadow for dropping shadow …

 

1) DROPPING SHADOW OUTSIDE THE BOX

box-shadow: h-shadow v-shadow blur spread color;

 

-> If h-shadow and v-shadow are set to 0 , shadow is speard equally in all directions.

-> If h-shadow is positive , shadow will move towards right and in similar way if v-shadow is positive, shadow will be more towards bottom.

-> If h-shadow and v-shadow are negative , then shadow would be more towards left and top respectively…

 

 

box_shadows1

2) DROPPING SHADOW INSIDE THE BOX
For dropping shadows inside the box, just use “inset” at the end…

box-shadow: h-shadow v-shadow blur spread color inset;

box_shadows2