CSS3 having property calle dbox-shadow, which will makes shadow color and image for a box. By using this we don’t need of any work done in photoshop or illustrator.
This property isn’t more complicated, just we have to give value for left align, top align, blur value and color of shadow.
[code type=css]
1] box-shadow: 10px 8px #888;
2] box-shadow: 10px 8px 5px #888;
3] box-shadow: 10px 8px 2px 5px #888;
[/code]
- 10px is for left and right side shadow adjustment
- 8px is for top and bottom side shadow adjustment
- 5px is for shadow blur effect range
- 2px is for blur width
- #888 is the color of the shadow
Actual code is box-shadow, based on browser we have to add code before it.
Internet explorer -> -ms-box-shadow
Chrome& Safari -> -webkit-box-shadow
firefox -> – moz-box-shadow
Opera -> – o–box-shadow
Demo for box-shadow CSS3 Property
1] Example: box-shadow:5px 5px 5px #666;
2] Example: box-shadow: 5px 5px #666;
Here we haven’t given blur value, so the shadow will appears like tick border.
3] Example: box-shadow: 0px 0px 5px #666;
left align and top align values are zero, so shadow appears just behind the box. when we give more blur value, it will appear like this.
4] Example: box-shadow: 3px 3px 10px 20px #666;
5] Example: box-shadow:inset -1px -2px 32px 15px #888;
6] Example: box-shadow: 0 9px 6px 0px black;
Thanks Prasad for the code and your site looks simply awesome and I like the contents in it.
Keep Blogging
Cheers!
Sathish
thanks bro
Thanks in support of sharing such a pleasant thinking,
article is nice, thats why i have read it fully
I am actually glad to read this web site posts which
includes tons of useful facts, thanks for providing these kinds of statistics.