The Four Sided Plug-n-Play Shadow Tutorial
This tutorial is pretty much obsolete. Now use CSS3 box-shadow instead.
All four sides - one image - png shadow - on any colored background - that's awesome! Big John originally created it - I changed a few things and made it easy (in my eyes at least). You can use this method for just about anything, but I believe it's a perfect fit for your main container shadow (AKA wrapper). I made the shadow.png image quite large (1500px x 3000px), so it should fit most anything you can throw at it. The reason I call it a "Plug-n-Play", and the beauty of this method is, you can "literally" simply add it to any container without changing a single thing other than adding a few divs and some accompanying CSS. Not to mention, the shadow will automagically adjust to any width or height your container happens to be. That means, no more Photoshop visits with each client mind change! You can download the four sided shadow.png I used here.
The HTML
<div id="shadow"><div id="a"></div><div id="b"></div><div id="c"><div id="d"><div id="e">
<div id="wrap">
....
</div>
</div></div></div></div>
The CSS
#shadow { /* move width and margins from #wrap to #shadow */
width:80%;
margin:30px auto 0;
position:relative;
padding-top:22px;
padding-left:22px;
}
#shadow #a {
position:absolute;
right:0;
top:0;
width:22px;
height:22px;
background:url(images/shadow.png) right top no-repeat;
}
#shadow #b {
position:absolute;
left:0;
bottom:0;
width:22px;
height:22px;
background:url(images/shadow.png) left bottom no-repeat;
}
#shadow #c {
background:url(images/shadow.png) right bottom no-repeat;
}
#shadow #d {
position:relative;
left:-22px;
top:-22px;
background:url(images/shadow.png) left top no-repeat;
}
#shadow #e {
position:relative;
left:11px;
top:11px;
}
* html #shadow #a, * html #shadow #b, * html #shadow #c, * html #shadow #d {
background:none;
}
