web-dev-qa-db-fra.com

css3 box ombres dans une seule direction?

J'ai un élément qui a des ombres encadrées, mais je veux seulement l'ombre sur le dessus.

N'y a-t-il aucun moyen de définir uniquement l'ombre supérieure? Dois-je recourir à la création d'éléments supplémentaires pour superposer les ombres latérales?

css3
48
Mark

C'est techniquement la même réponse que @ChrisJ, avec quelques détails supplémentaires sur la façon de faire box-shadow faites votre offre:

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

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

Le <spread-radius> doit être négatif <blur-radius> (pour qu'aucun des autres côtés flous n'apparaisse), puis vous devez bousculer le <offset-y> baisse du même montant:

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

Il vous donnera une seule bande de dégradé à travers le haut de l'élément.

121
zzzzBov

box-shadow décale l'ombre d'un montant donné dans chaque direction. Vous avez donc besoin d'un décalage x égal à 0 et d'un décalage y négatif.

De plus, vous devez jouer avec le rayon de flou et le rayon d'étalement afin 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 Mozilla Developer Network .

9
ChrisJ

Une meilleure façon serait d'utiliser un dégradé d'arrière-plan, voici les deux côte à côte.

http://jsfiddle.net/wh3L8/

2
methodofaction

Exemple:

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

Le premier paramètre et le second paramètre spécifient le décalage de l'ombre par rapport à 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.

Spécifier uniquement le deuxième paramètre avec le décalage souhaité donne l'ombre supérieure sans ombres latérales.

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

Un très joli tutoriel sur les ombres CSS3 Box - http://www.css3.info/preview/box-shadow/

2
Shabnam K

Voici mon exemple, veuillez essayer une fois

-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
1
Webpixstudio

Voici un petit hack que j'ai fait.

<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 souhaite créer l'ombre de boîte d'un côté (dans ce cas, je veux une ombre d'encart unilatérale pour id="element" venant du bas)

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

    boîte-ombre: 0 -8px 20px 2px # DEDEE3;

0
user1187135

Essayez peut-être d'utiliser box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

avec overflow-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

utilisation overflow-x: hidden; et box-shadow: 0px 10px 16px -10px #000;

0
Marcos Eusebi