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


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


    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.