Accueil    CSS    Propriété box-shadow
 



style css box-shadow  Style CSS box-shadow

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété css box-shadow permet d'appliquer un effet d'ombre portée dégradée autour d'un élément html (à la limite de ses bordures) comme par exemple une image ou une division.
Sa syntaxe est la suivante :

box-shadow: [décalage horizontal] [décalage vertical] [flou de l'ombre]
                  [étendue de l'ombre] [couleur de l'ombre] [ombre interne / externe]

Les décalages horizontaux et verticaux de l'ombre portée sont requis et peuvent être positifs (l'ombre portée horizontale sera sur la droite et l'ombre portée vertical vers le bas) ou négatifs (ombre portée horizontale sur la gauche et ombre portée verticale vers le haut). Les valeurs données à ces décalages définissent la taille des composantes horizontales et verticales de l'ombre par rapport à la bordure de l'élément.

Les autres paramètres sont optionnels avec par défaut le flou et l'étendue valant 0, la couleur étant noire et l'ombre étant externe. Il est possible d'appliquer une ombre complète autour d'un élément (de ses 4 bordures) en définissant des décalages à 0, mais une étendue valorisée ainsi qu'une valeur de flou.



Propriétés pour le style box-shadow :




Propriété Définition Valeurs CSS
box-shadow Permet d'appliquer une ombre portée à un élément html CSS 3
[décalage horizontal] épaisseur horizontale de l'ombre portée (positive ou négative) valeur (px, em, ...)
[décalage vertical] épaisseur verticale de l'ombre portée (positive ou négative) valeur (px, em, ...)
[flou de l'ombre] effet flouté et dégradé appliqué à l'ombre portée valeur (px, em, ...)
[étendue de l'ombre] étendue complémentaire au décalage appliquée dès la bordure de l'élément html valeur (px, em, ...)
[couleur de l'ombre] couleur de l'ombre portée couleur
[ombre interne / externe] détermine si l'ombre s'applique vers l'extérieur ou l'intérieur de l'élément html. inset
outset


Exemple d'utilisation du style css box-shadow :






<img src="exemple.png" alt="exemple css box-shadow" style="height:100px; box-shadow:-10px -10px silver; margin:10px;" />
<img src="exemple.png" alt="exemple css box-shadow" style="height:100px; box-shadow:10px -10px silver; margin:10px;" />
<img src="exemple.png" alt="exemple css box-shadow" style="height:100px; box-shadow:10px 10px silver; margin:10px;" />
<img src="exemple.png" alt="exemple css box-shadow" style="height:100px; box-shadow:-10px 10px silver; margin:10px;" />



<img src="exemple.png" alt="exemple css box-shadow" style="height:150px; box-shadow:15px 15px 10px silver; margin:15px;" />



<img src="exemple.png" alt="exemple css box-shadow" style="height:150px; box-shadow:0px 0px 15px 10px silver; margin:15px;" />



<div style="width:300px; height:60px; margin:10px; line-height:60px; text-align:center; border-radius:6px; background-color:silver; box-shadow:0 0 10px 4px grey;">
   Style box-shadow appliqué sur une div
</div>

<input type="text" value="Style box-shadow appliqué sur un input"
   style="width:300px; height:30px; margin:10px; padding:4px; border-radius:6px;
   border:solid 1px C29836; background-color:orange;
   box-shadow:0 0 10px 4px #E09D16;" />




exemple css box-shadow exemple css box-shadow exemple css box-shadow exemple css box-shadow


exemple css box-shadow



exemple css box-shadow





Style box-shadow appliqué sur une div