CSS3 box-shadow per div sovrapposti-come

Question

che sto cercando di ottenere questo effetto con CSS3:

Il codice HTML è pulito qualcosa come

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

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

e il CSS è , per il momento, qualcosa come

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; 
} 

Al fine di ottenere il risultato desiderato, I necessario:

1. Nascondere l'ombra superiore del div principale (nessun problema con questo)
2. Portare ombra fondo di intestazione di fronte al div principale, e non dietro come lo è adesso.

Ho letto molto di box-shadow e non ho trovato una soluzione che mi faccia davvero piacere ... Qualche idea?

Answer 1

Questo jsfiddle fa quello che vuoi.

Il modo in cui funziona è con un elemento principale #wrap che centra il contenuto e crea una mappa di coordinate per l'elemento #main in posizione assoluta. Lo fa a causa della sua posizione: relativa regola CSS. Si finisce con il seguente markup:

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

Il header viene quindi inserito all'interno di questa e della posizione: relativa e un indice z per impostarla impilabile disopra del contenitore #main.

Infine #main è posizionato in modo assoluto sotto lo header. Il codice CSS è simile al seguente:

/* 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

Ho appena avuto fortuna usando il posizionamento relativo.

Ad esempio.

Il primo div ha un'ombra di casella e un margine inferiore. Il secondo div fa scorrere sotto l'ombra.

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

Non è la soluzione migliore ma funziona per me.

Answer 3

la posizione di impostazione su "relativo" risolverà già il problema!