CSS Box Shadow – Haut et bas seulement

Duplication possible:
ombre scope seulement en bas css3

Je ne trouve aucun exemple de la façon de procéder, mais comment puis-je append une ombre de boîte uniquement en haut et en bas d’un élément?

Comme Kristian l’a souligné, un bon contrôle des valeurs z résoudra souvent vos problèmes.

Si cela ne fonctionne pas, vous pouvez consulter CSS Box Shadow Bottom Only sur l’utilisation du dépassement de capacité masqué pour masquer l’excès d’ombre.

Je pense aussi 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 donnera un certain contrôle sur la “quantité” d’ombre dans chaque direction.

Consultez http://www.css3.info/preview/box-shadow/ pour plus d’informations sur box-shadow.

J’espère que c’était ce que vous cherchiez!

Après quelques essais, j’ai trouvé qu’une quasortingème valeur dans la ligne contrôle la propagation (au moins dans FF 10). Je me suis opposé aux compensations verticales et leur ai donné un écart négatif.

Voici le stylo de travail: http://codepen.io/gillytech/pen/dlbsx

      

Cela fonctionne parfaitement pour moi!

C’est donc ma première réponse ici, et parce que j’avais besoin de quelque chose de similaire, j’ai fait avec 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 ce sont les meilleures solutions mais peut-être que cela aidera quelqu’un.

HTML

 
content here

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 afin qu’il affiche uniquement une ombre pour le haut et le bas d’un élément.

Légende : insetOption leftPosition topPosition flouEtendue de la forceCouleur

La description
La clé pour y parvenir est de définir la valeur de flou sur <= le négatif de la valeur étalée (par exemple, encart 0px 5px -? Px 5px # 000; la valeur de flou doit être inférieure ou égale à -5) et de conserver la valeur de flou > 0 lorsqu’il est soustrait de la valeur de positionnement primaire (ex. En utilisant l’exemple ci-dessus, la valeur de flou doit être de -9 et plus, nous donnant ainsi une valeur optimale pour que le flou soit compris 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); } 

essentiellement l’ombre est la forme de la boîte juste décalée derrière la boîte réelle. Pour masquer des parties de l’ombre, vous devez créer des divs supplémentaires et définir leur index z au-dessus de la case ombrée afin que l’ombre ne soit pas visible.

Si vous souhaitez avoir un contrôle extrêmement précis sur vos ombres , créez-les en tant qu’images et créez des divisions de conteneur avec la quantité de remplissage et de marges appropriée .. puis utilisez le correctif png pour vous assurer que les ombres apparaissent correctement dans tous les navigateurs