Drop shadow on top and bottom of element? Please help!

[crees]

Hello,

I am trying to apply a drop shadow to only the top and bottom of an element. I also need it to span the entire width of the page. So far I’ve figured out how to apply it to the bottom but I’ve noticed the shadow always ends about 2px short on each side regardless of the size if my screen.

Here is what I currently have. Please shed some light. Thanks!

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

[dfogge]

i had to do this recently, and the way i accomplished it was by adding inset drop shadows to the areas above and below the main content area.

try something like this:

header {

box-shadow:inset 0 -15px 5px -16px #111;

}

footer {

box-shadow:inset 0 15px 5px -16px #111;

}

[Anonymous]

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!

[joshuanhibbert]

@TheDark12 It would be much more efficient to do this:

box-shadow: 0 8px 6px #000,

0 -8px 6px #000;

[crees]

Thanks for you comments and help on this. I tried each idea and @TheDark12 was the easiest. Thanks!

[dfogge]

one thing to keep in mind when using joshua’s solution is the shadow falls just a little short of the full width.

see this jsfiddle: http://jsfiddle.net/euPjP/1/

[Author]

Posts