CSS3 box-shadow de divs superpuestos-como

Question

que estoy tratando de conseguir este efecto con CSS3:

El código HTML que es algo así como limpiamente

... 
<header> 
    ... 
</header> 

<div id="wrapper"> 
    ... 
</div> 
... 

y el css es , por el momento, algo como

header { 
    display: block; 
    width: 900px; 
    height: 230px; 
    margin: 0 auto; 
    border: 1px solid #211C18; 
    ... 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

#wrapper { 
    width: 820px;  
    margin: 0 auto; 
    ... 
    border-right: 1px solid #211C18; 
    border-bottom: 1px solid #211C18; 
    border-left: 1px solid #211C18; 
    ... 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

Para obtener el resultado deseado, I necesitará:

1. ocultar la sombra superior de la div principal (no hay problema con eso)
2. Llevar sombra inferior de cabecera delante de la div principal, y no detrás, ya que es en este momento.

He estado leyendo mucho sobre box-shadow, y no he encontrado una solución que realmente me guste ... ¿Alguna idea?

Answer 1

Este jsfiddle hace lo que quiere.

La forma en que funciona es con un elemento principal #wrap que centra el contenido y crea un mapa de coordenadas para el elemento #main absolutamente posicionado. Lo hace debido a su posición: regla relativa de CSS. Se termina con la siguiente marcado:

<div id="wrap"> 
    <header></header> 
    <div id="main"></div> 
</div> 

El header luego se coloca dentro de esta y posición dada: relativa y un índice z para configurarlo apilado encima del recipiente #main.

Finalmente, #main está absolutamente posicionado debajo del header. El CSS se ve así:

/* centre content and create coordinate map for absolutely positioned #main */ 
#wrap { 
    width: 300px; 
    margin: 20px auto; 
    position: relative; 
} 

header, #main { 
    background: #fff; 

    /* rounded corners */ 
    border: 1px solid #211C18; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  

    /* dropshadows */ 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

header { 
    display: block; 
    width: 300px; 
    height: 50px; 

    /* stack above the #main container */ 
    position: relative; 
    z-index: 2; 
} 

#main { 
    width: 200px; 
    height: 70px; 

    /* stack below the header and underlap it...if that's even a word */ 
    position: absolute; 
    z-index: 1; 
    top: 40px; 
    left: 50px; 
} 

Answer 2

Acabo de tener un poco de suerte con el posicionamiento relativo.

Por ejemplo.

1st div tiene una sombreado de caja y un margen inferior. 2nd div se desliza bajo la sombra.

#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;} 
#seconddiv {width: 960px; position: relative; top: -10px;} 

No es la mejor solución pero funciona para mí.

Answer 3

posición de ajuste a "relativo" ya resolverá el problema!