Geeks With Blogs

News
Anirudha gupta

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 

 

<div class="container">

<div class="container-hold pull-left">

<div class="container-hold-top pull-left">

</div>

</div>

</div>

 

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? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

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.

Posted on Tuesday, June 4, 2013 10:38 AM | Back to top


Comments on this post: How to design shadow based box in Css 3 .

# tom brady youth jersey
Requesting Gravatar...
thanks for share!
Left by ZWFN on Sep 09, 2013 7:10 AM

Your comment:
 (will show your gravatar)


Copyright © Anirudha | Powered by: GeeksWithBlogs.net