CSS3 box-shadow pour qui se chevauchent comme les divs
j'essaie d'obtenir cet effet avec css3:
le code HTML est clairement quelque chose comme
...
<header>
...
</header>
<div id="wrapper">
...
</div>
...
et le css est, pour le moment, quelque chose comme
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;
}
pour obtenir le résultat souhaité, je dois:
- Cacher la partie supérieure de l'ombre de la div principale (pas de problème avec ça)
- apportez l'ombre inférieure de header devant la div principale, et non derrière comme elle est droit maintenant.
j'ai beaucoup lu à propos de box-shadow, et je n'ai pas trouvé de solution qui me plaise vraiment... Une idée?
3 réponses
jsfiddle est-ce que vous voulez.
La façon dont il fonctionne, c'est avec un principal #wrap élément qui Centre le contenu et crée une table de coordonnées pour l'absolument positionné #main élément. Il le fait en raison de sa position: relative CSS rule. Vous vous retrouvez avec la balise suivante:
<div id="wrap">
<header></header>
<div id="main"></div>
</div>
header est alors placé à l'intérieur de cette position et donné: relatif et un index z pour le placer empiler au-dessus du #main conteneur.
Enfin #main est absolument positionné au-dessous du header. Le CSS ressemble à ceci:
/* 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;
}
je viens d'avoir un peu de chance en utilisant le positionnement relatif.
Par exemple.
1ère div a une zone d'ombre, et une marge inférieure. La 2e division glisse sous l'ombre.
#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;}
#seconddiv {width: 960px; position: relative; top: -10px;}
ce n'est pas la meilleure solution mais ça marche pour moi.