How To Design Shadow Based Box In Css 3

In this post I will show you how to create a box and wrapper for page that have shadow effect using css3.

For make this effect we use box-shadow

Here is the css

.container {

box-shadow: 10px 10px 5px #888;

}

.container .container-hold {

box-shadow: -8px 10px 5px #888;

width: 100%;

height: 100%;

}

.container .container-hold .container-hold-top {

box-shadow: 10px -10px 8px #888;

height: 100%;

width: 100%;

}

This code make shadow on left ,right and top side of wrapper.

This is the syntax for box-shadow

Formal syntax: none | [inset? && [ ? ? ? ] ]#</font></p>

Check my code that I not use spread for box-shadow. You can try it to make spread your box-shadow more.

Here is some link to great post

http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/

http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html

http://www.css3.info/preview/box-shadow/

If you miss something in my post Please comment me so I can improve it.