CSS3 Box Shadow

With CSS3 coming into play web designing is getting better and saving lot of time for designers, now there is no need of making transparent images for shadow effects, just a simple CSS and u can get a nice shadow effect to ur block elements.
Here's the CSS syntax for any block level elements like Div, Image etc.

Box-Shadow

.boxDiv {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

Inner shadow

.box {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

One-sided shadow

.box {
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
     box-shadow: 0 8px 6px -6px black;
}

Now lets discuss the values used in the syntax:

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

h-shadow is the horizontal offset of the shadow, both positive and negative can be used positive value means the shadow will be on the right side of the box and a negative value will show the shadow on the left side of the box.

v-shadow is the vertical offset of the shadow, it also accepts both positive and negative values, here positive values put the shadow below the box and negative value means shadow above the box.

blur is the blur radius its optional, if the value is 0 the shadow will be sharp. Higher value means more blurred shadow.

spread is the spread radius of the shadow in simple words we can say it is size of the shadow, this one is also optional, default value is 0 the shadow is same size as blur, positive value increase the  size of the shadow and negative value decreases.

color is the color of the shadow u want, obviously its better to use dark colors for the shadow.

There is another value which you can see above in the syntax. Its inset this one is also Optional value but this can change the shadow from an outer shadow (outset) to an inner shadow.

I hope this much description was enough for you, its great to have this shadow effects in your websites. 

Share Your Solutions