Two CSS3 Drop Shadows (Left/Riight and Left/Right/Bottom)

Question

I have a wordpress site I'm working on and I'm needing to add CSS3 drop shadows to four elements. Content-menu-wrapper is independent of the other divs (not graphically connected) and is functional.

Next divs are content wrapper, footer, footer-bottom. Each div is graphically 'connected' one on top of the other. Content-wrapper needs shadow on top, left and right. Footer needs shadow on left and right. Footer-bottom needs shadow on left, right and bottom.

When I try editing the shadow to "test", the shadow simply disappears. Most likely I'm using the code wrong. Below is the functioning code for content-menu-wrapper.

CSS :

#content-menu-wrapper
{
    background-color: white;
    margin:0px auto 15px auto;
    height: 32px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

Please help me with the code for the other three divs. Thank you.

Answer 1

Left and right is easy:

box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.6),
             15px 0 15px -15px rgba(0, 0, 0, 0.6);

Getting three sides to look good however is really hard as using the above technique there are gaps in the corners.

My suggestion would be to enclose all the elements in a wrapping div and apply the box-shadow to that. Keeps the CSS much cleaner and is easier to pull off.

Answer 2

Use this online tool to get the css for the shadow for your divs.

Answer 3

I was able to fix this problem by wrapping the content and footer divs within a larger div per jimjimmy's answer above. These are the details: First I created a new div id in common.css, "content-shadow".

Then I added the box-shadow attribute plus copy/paste attributes from my content-wrapper div so the site would format correctly. In my case it looked like this:

#content-shadow {

    border-left:0px solid #E7E7E7;
    border-right:0px solid #E7E7E7; 
    border-bottom:0px solid #E7E7E7;
    border-top:0px solid #E7E7E7;
    background-color:#FFFFFF;
    margin:0px auto 0px auto;
    margin-bottom:0px;
    margin-top:0px;
    width: 1000px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

Next I placed a div in the header.php file of my theme before the "content-wrapper" div. Saving that file I moved to the footer.php file and placed a tag at the end of the file in the appropriate place. For me this was above "content-bottom-empty-space" div so I could have a little space on the bottom of my site.

Save the file and now it will/should propagate throughout wordpress. I hope this helps somebody in some way.