Je ne trouve pas d'exemples de la façon de procéder, mais comment puis-je ajouter une ombre portée uniquement en haut et en bas d'un élément ?
Comme l'a souligné Kristian, un bon contrôle des valeurs z résoudra souvent vos problèmes.
Si cela ne fonctionne pas, vous pouvez jeter un coup d'œil à CSS Box Shadow Bottom Only sur l'utilisation de l'overflow hidden pour cacher l'excès d'ombre.
J'ai également à l'esprit que la propriété box-shadow peut accepter une liste d'ombres séparées par des virgules, comme ceci :
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;Cela vous permettra de contrôler la "quantité" d'ombre dans chaque direction.
Jetez un coup d'œil à http://www.css3.info/preview/box-shadow/ pour plus d'informations sur le box-shadow.
J'espère que c'était ce que vous cherchiez !
Si quelqu'un cherche à savoir comment définir le box-shadow INSET à partir d'une seule direction, voici les modèles CSS que vous pouvez utiliser. TOP-ONLY inset 0px 8px 6px -6px #888 | RIGHT-ONLY inset -8px 0px 6px -6px #888 | BOTTOM-ONLY inset 0px -8px 6px -6px #888 | UNIQUEMENT GAUCHE inset 8px 0px 6px -6px #888
Après quelques expérimentations, j'ai découvert qu'une quatrième valeur dans la ligne contrôle l'écart (au moins dans FF 10). J'ai opposé les décalages verticaux et leur ai donné un écart négatif.
Voici le stylo qui fonctionne : http://codepen.io/gillytech/pen/dlbsx
<html>
<head>
<style type="text/css">
#test {
width: 500px;
border: 1px #CCC solid;
height: 200px;
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>Cela fonctionne parfaitement pour moi !
@Jakobud C'était la base de la question originale... Comment ajouter des ombres de boîte d'insertion sur seulement le haut et le bas de la div. Est-ce que j'ai manqué quelque chose ?
Il s'agit d'une solution propre et sans piratage. Elle devrait être marquée comme étant la bonne, IMHO. (bien que la réponse sélectionnée actuelle le mentionne).
C'est donc ma première réponse ici, et parce que j'avais besoin de quelque chose de similaire, j'ai utilisé des pseudo-éléments pour 2 ombres intérieures, et un DIV supplémentaire pour une ombre extérieure supérieure. Je ne sais pas si c'est la meilleure solution, mais peut-être que cela aidera quelqu'un.
HTML
<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>CSS
.overlay {
background: #f7f7f4;
height: 185px;
overflow: hidden;
position: relative;
width: 100%;
}
.overlay:before {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
content: " ";
display: block;
margin: 0 auto;
width: 80%;
}
.overlay:after {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
content: "-";
display: block;
margin: 0 auto;
position: absolute;
bottom: -65px;
left: -50%;
right: -50%;
width: 80%;
}
.shadow {
position: relative;
width:100%;
height:8px;
margin: 0 0 -22px 0;
-webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
border-radius: 50%;
}
J'ai joué avec et je pense avoir une solution. L'exemple suivant montre comment définir Box-Shadow de manière à ce que l'ombre ne soit affichée que pour les parties supérieure et inférieure d'un élément.
Légende : insetOption leftPosition topPosition blurStrength spreadStrength couleur
Description
La clé pour y parvenir est de définir la valeur du flou à <= la valeur négative de l'écart (ex. inset 0px 5px -?px 5px #000 ; la valeur du flou doit être de -5 et moins) et de garder la valeur du flou > 0 lorsqu'elle est soustraite de la valeur de positionnement primaire (ex. en utilisant l'exemple ci-dessus, la valeur du flou doit être de -9 et plus, ce qui nous donne une valeur optimale pour le flou entre -5 et -9).
Solution
.styleName {
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);
/* for IE 9 */
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for webkit browsers */
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
}
Pour masquer des parties de l'ombre, vous devez créer des divs supplémentaires et définir leur z-index au-dessus de la boîte ombrée afin que l'ombre ne soit pas visible.
Si vous souhaitez avoir un contrôle extrêmement précis sur vos ombres pour les construire en tant qu'images et créer des divs conteneurs avec la bonne quantité de padding et de marges, puis utiliser le correctif png pour s'assurer que les ombres s'affichent correctement dans tous les navigateurs.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
2 votes
Duplicata de nombreuses autres questions sur l'ombrage de certains côtés d'une boîte (voir colonne connexe ->)
1 votes
Ce violon peut être utile à certains.
0 votes
Avec des ombres multiples : stackoverflow.com/a/20596554/1491212 Vous pouvez l'adapter pour le haut et le bas mais vous aurez l'essentiel.
0 votes
@BoltClock mais je veux des ombres en dehors, pas en dedans.