Propriété CSS box-shadow

❮ Précédent Suivant ❯

La propriété box-shadow permet d'implémenter des ombres multiples autour de la boîte spécifiant les valeurs color, size, blur, offset et inset. Vous pouvez ajouter des effets séparé par des virgules.

Si border-radius est spécifie sur l'élément avec une ombre de boîte, cette dernière s'en prend aux même coins arrondis.

Ce sont les deux valeurs qui définissent offset de l'ombre. H-offset spécifie la distance horizontale. Les valeurs positives donnent une ombre au droit de l'élément. Les valeurs négatives placent l'ombre au gauche de l'élément. V-offset spécifie la distance vérticale. La valeur positive place une ombre au dessous de l'élément. La valeur négative place l'ombre au dessus de l'élément. Si les deux valeurs sont 0, l'ombre est place derrière de l'élément.

La troisième valeur est blur. Le plus haut est le nombre, le plus est le blur, donc l'ombre devient plus large et luminaire. Valeurs négatives ne sont pas permises. Si la valeur est 0, le bord de l'ombre est tranchant.

La quatrième valeur est inset. Cela ajoute les ombres internes à l'élément. Elle est la valeur initiale, l'ombre est supposée être une ombre portée.

La cinquième valeur est spread. Les valeur positives augmentent le volume de l'ombre, les valeurs négatives le fait rétrécir. Si la valeur est 0, l'ombre sera de la même taille que l'élément.

La sixième valeur est color. Elle ajoute des couleurs à l'ombre. Si cette valeur est 0, la couleur utilisée dépend du navigateur.

En utilisant la propriété box-shadow, on doit utiliser les préfixes -moz- et -webkit- pour Mozilla et Webkit.

Valeur initiale	none
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. L'ombre de la boîte est animable.
Version	CSS3
Syntaxe DOM	object.style.boxShadow = "15px 25px 35px gray";

Syntaxe

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

Essayons d'ajouter les ombres à l'élément.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: 5px 4px 10px #1c87c9;
      -moz-box-shadow: 5px 4px 10px #1c87c9;
      -webkit-box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de box-shadow</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Ajoutons les ombres multiples à l'élément.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 50%;
      height: 100px;
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>ombres multiples avec box-shadow.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Maintenant donnons une valeur inset à l'élément. Elle ajoute des ombres intérieures.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -moz-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -webkit-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow avec la valeur inset</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Aucune ombre.
h-offset	Requise. Offset horizontal de l'ombre. Une valeur positive donne une ombre au côté droit de la boîte, une valeur négative donne une ombre au côté gauche de la boîte.
v-offset	Requise. Offset vértical de l'ombre. Une valeur positive donne une ombre au côté inférieure de la boîte, une valeur négative donne une ombre au côté supérieure de la boîte.
blur	Facultative. L'ombre est floue. Le plus haut est le nombre, le plus floue est l'ombre.
spread	Facultative. L'ombre se réprend. Une valeur positive augmente le volume de l'ombre, une valeur négative réduit le volume.
inset	Facultative. Rend outset (ombre extérne) inset (ombre interne).
color	Facultative. La couleur de l'ombre.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.