CSS shadows on 3 sides

Question

I'm looking at all the CSS Drop shadow tutorials, which are great. Unfortunately, I need to put a shadow on three sides of a block element (left, bottom, right). All the tutorials talk about shifting your block element up and to the left. Anyone have insights into putting a shadow on three or even four sides?

Answer 1

make your block element larger/higher, so that it exceeds the sides you want.

Answer 2

Here's one way to do it:

<div style='position:relative;'>
    <div style='position:absolute;top:10px;left:10px;width:300px;height:100px;z-index:1;background-color:#CCCCCC'></div>
    <div style='position:absolute;top:0px;left:0px;width:300px;height:100px;z-index:2;background-color:#00CCFF'>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper.</p>
    </div>
</div>

Size and position the "z-index:1" DIV to your liking.

Answer 3

Pseudo HTML

<div style="position:absolute;top:8;left:12;width:200;height:204;background-color:#888888"></div>
<div style="position:absolute;top:10;left:10;width:200;height:200;background-color:#FFFFFF">The element</div>

You need to play with the size of the shadow. In the above example the shadow is slightly higher than the element so the shadow shows above, its slightly offset to the left so the shadow shows on the right and it is slightly larger than the element so the shadow shows below.

Answer 4

Thanks everyone. The way I ended up doing it was sorta like this:

<div id="top_margin"></div>
<div id="left_right_shadow">this div has a 5 px tall repeating background that is a bit bigger than the width of my content block, shadow on the left, white space, shadow on the right
  <div id="content">Content as normal</div>
</div>
<div id="bottom_margin">This has the bottom shadow</div>