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