Geek Answers Handbook

CSS Shadows on Three Sides

I look at all the Tutorial CSS tags that look great. Unfortunately, I need to put a shadow on the three sides of a block element (left, bottom, right). All lessons talk about moving a block element up and left. Does anyone know how to put a shadow on three or even four sides?

+2
source share
4 answers

Thanks to everyone. The way I did it was something 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>
0
source

make the block element bigger / higher so that it exceeds the sides you need.

+3
source

:

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

"z-index: 1" DIV .

+1

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 is displayed higher, it is slightly shifted to the left so that the shadow is shown to the right, and it is slightly larger than the element, so the shadow is displayed below.

+1
source

More articles:


All Articles