Css Shadows On 3 Sides

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 tutorial

Solution 1:

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

Solution 2:

Here's one way to do it:

<divstyle='position:relative;'><divstyle='position:absolute;top:10px;left:10px;width:300px;height:100px;z-index:1;background-color:#CCCCCC'></div><divstyle='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.

Solution 3:

Pseudo HTML

<divstyle="position:absolute;top:8;left:12;width:200;height:204;background-color:#888888"></div><divstyle="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.

Solution 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>