Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

box-shadow over floating divs

I got a problem rendering box-shadows over floating divs! Ive tested in chrome and firefox with the same result.

    <html>
        <head>
        </head>
        <body>
            <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
            </div>
            <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
            </div>
        </body>
    </html>

Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?

regards /Joel

like image 296
Yo-L Avatar asked May 13 '11 13:05

Yo-L


People also ask

Can you have multiple box shadows?

You can comma separate box-shadow any many times as you like.

Which of the following values are required for the CSS box shadow property?

The offset-x and offset-y values are required for the CSS box-shadow property. The color value is not required, but since the default for the box-shadow is transparent, the box-shadow will not appear unless you specify a color value. The larger the blur-radius value, the bigger the blur.

How does box shadow work?

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.


2 Answers

Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.

You need add all of the following

-moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;

-webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.

Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.

like image 90
JaredMcAteer Avatar answered Oct 05 '22 06:10

JaredMcAteer


What's wrong with them? If you're worried about not seeing the bottom shadow of the top div it's because you need a little separation. If you're having trouble seeing the box-shadow it's because you need to use vendor-specific prefixes at this stage, like so.

Demo: jsfiddle.net/q5yf3

If you want them to be stuck together, just give the first div a z-index with position:relative and it will look how you want it to.

HTML:

<div class="bs up"></div>
<div class="bs"></div>

CSS:

div.bs {
    float:left;
    clear:left;
    margin:1em;
    width:200px;
    height:200px;
    background:#aaa;
    box-shadow:0 8px 8px #000;
    -moz-box-shadow:0 8px 8px #000;
    -webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }

Demo: jsfiddle.net/VaVhy

That said, I'd also recommend looking into using rgba() instead of hex values for box-shadow color as it renders the shadow a lot more naturally on non flat-colored backgrounds.

like image 45
Marcel Avatar answered Oct 05 '22 07:10

Marcel