Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Drop shadow on top and bottom of element? Please help! Re: Drop shadow on top and bottom of element? Please help!

#95471
Anonymous
Inactive

I’ve got it! If you don’t have an element above and below for @dfogge’s method to work here’s another solution, although it does require extra markup.

See the below CSS.


#main {
width: 100%;
height: 400px;
background: #FFFFFF;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.inner-main {
margin: 6px 0;
-webkit-box-shadow: 0 8px 6px -6px black,
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

If you apply the box-shadow to a div inside #main and set #main to overflow: hidden; you can effectively hide the drop shadow. Then just apply a top and bottom margin to the inside div equal to the spread of the drop shadow.

Hope this helps!