How to : Div box shadow with image

[tnguru]

How to make a css div box corner shadow like this image..

Here is the image:

http://i51.tinypic.com/vfv51h.png

help me to do the page like that image.

if u need psd file let me know!

[tnguru]

Hi i already searched somany times with google anyway thanks for your sugessions.
pls have a look at the image i posted above. i don’t need to make a shadow, i need background images to make shadows.
i just tryed the codes like this

body{
margin:30px auto;
padding:0;
color:#333;
background:#e8e8e8;
}
#box{
margin:0 auto;
padding:0;
background:#fff;
width:920px;
overflow: hidden;
position: relative;
}
#box-outer{
margin:0 auto;
padding:0;
background:transparent;
background-image: url(‘top-shadow.png’), url(‘bottom-shadow.png’);
background-repeat: no-repeat;
background-position: left top, right bottom;
width:940px;
position: relative;
}

[tnguru]

i mean using css it’s not works with all browsers.. that’s why like to create with image.

[kalps1982]

when you say all browser i am sure you mean IE’s, all other latest browsers. For IEs you can try with http://css3pie.com/

If still that doesnt solve your problem, try using blending options in Photoshop to drop shadow. :)

[tnguru]

now i got the solution.. here is the css code

body{
background:#e8e8e8;
color:#444;
font: 12px “Helvetica Neue”, Helvetica, Arial, sans-serif;
margin:25px auto;
padding:0;
}
#wraper{
width:960px;
margin:0 auto;
padding:0;
position:relative;
display: table;
background-image: url(‘top-left.png’), url(‘bottom-right.png’);
background-repeat: no-repeat;
background-position: left top, right bottom;
}
#container{
background:#fff;
width:940px;
margin:8px 8px 12px 12px;
padding:0;
min-height:700px;
border:1px solid #e1e1e1;
}

and here is the html code

the solution is :

i just used outer div display is table..

but it’s not works with ie6,ie7,ie8
works with ie9,mozilla 3+, safari 4+, opera 10+

anyway i hope most of users are browse with latest browser..

thanks all :(

[Author]

Posts