css3 box shadows in one direction only ?

Question

J'ai un élément qui a des ombres de boîte insérées, mais je veux que l'ombre soit seulement sur le haut.

N'y a-t-il aucun moyen de définir uniquement l'ombre supérieure ? Dois-je créer des éléments supplémentaires pour recouvrir les ombres latérales ?

Merci

Answer 1

Il s'agit techniquement de la même réponse que celle de @ChrisJ, avec quelques détails supplémentaires sur la façon de faire de la box-shadow faire vos enchères :

pour référence _{les éléments * sont facultatifs} :

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;

Le site <spread-radius> doit être négatif <blur-radius> (de sorte qu'aucun des autres côtés flous n'apparaisse), puis vous devez augmenter la valeur de l'option <offset-y> de la même quantité :

box-shadow: inset 0 20px 20px -20px #000000;

Vous obtiendrez une seule bande de gradient en haut de l'élément.

Answer 2

Box-shadow décale l'ombre d'une quantité donnée dans chaque direction. Vous avez donc besoin que x-offset soit égal à 0, et y-offset à quelque chose de négatif.

En outre, vous devez jouer avec le rayon de flou et le rayon d'étalement pour que l'ombre ne soit pas visible sur les côtés gauche et droit.

Exemple :

box-shadow: #777 0px -10px 5px -2px;

Voir la description sur le Réseau de développeurs Mozilla .

Answer 3

Exemple :

  box-shadow: 0 2px 0px 0px red inset;

Le premier paramètre et le deuxième paramètre spécifient le décalage de l'ombre dans la direction x et la direction y respectivement. Le troisième paramètre spécifie la distance de flou. Enfin, le quatrième paramètre spécifie la distance d'étalement.

En spécifiant uniquement le deuxième paramètre avec le décalage souhaité, on obtient l'ombre supérieure sans les ombres latérales.

La démo peut être trouvée ici : http://jsfiddle.net/rEdBy/

Un très beau tutoriel sur les ombres de boîtes en CSS3 - http://www.css3.info/preview/box-shadow/

Answer 4

Une meilleure solution serait d'utiliser un gradient de fond, ici les deux sont côte à côte.

http://jsfiddle.net/wh3L8/

Answer 5

Voici une petite astuce que j'ai faite.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Créer un <div class="one_side_shadow"></div> juste en dessous de l'élément pour lequel je veux créer l'ombre d'un côté de la boîte (dans ce cas, je veux une ombre d'un côté de la boîte pour l'élément en question). id="element" venant du bas)

2. Ensuite, j'ai créé une ombre en boîte régulière en utilisant un décalage vertical négatif pour pousser l'ombre vers le haut sur un côté.

   box-shadow : 0 -8px 20px 2px #DEDEE3 ;