Wednesday, August 29, 2012

Box Shadow using CSS3

Hello Guys.
There are basically two types of the shadow to box. one is outer its looks like the glow and some times it gives 3D effects. and another is for the inner glow or inner shadow.
instead of CSS3, we have to use image for the shadow, glow and inner shadow.
so its speedy and easy to change.

1) Outset Glow

Syntax Attributes: 


Inset: NO
Horizontal Length: 5px
Vertical Length: 4px
Blur Radius: 50px
Spread: 1px
Hex: #000000


Syntax:


-webkit-box-shadow: 5px 4px 50px 1px #000000;
box-shadow: 5px 4px 50px 1px #000000;


2) Inset Glow (Inner shadow)


Syntax Attributes: 


Inset: YES
Horizontal Length: 5px
Vertical Length: 4px
Blur Radius: 50px
Spread: 1px
Hex: #000000


Syntax:


-webkit-box-shadow: inset 5px 4px 50px 1px #000000;
box-shadow: inset 5px 4px 50px 1px #000000;



Browser Support


Chrome: 4.0+
Firefox: 4.0+
IE: 9.0+
Opera: 10.5+ 
Safari: 3.1+

Change attributes as per your design.. :)
Cheers...