Propriété CSS box-shadow
La propriété box-shadow vous permet d’ajouter plusieurs ombres autour d’un élément en spécifiant les valeurs du décalage horizontal, du décalage vertical, du rayon de flou, du rayon d’étalement, de la couleur et du mot-clé inset.
La propriété box-shadow fait partie des propriétés CSS3.
Vous pouvez ajouter des effets séparés par des virgules. Si vous spécifiez un border-radius sur l’élément avec une ombre portée, l’ombre portée prendra les mêmes coins arrondis.
Ce sont deux valeurs qui définissent le décalage de l’ombre. H-offset spécifie la distance horizontale. Les valeurs positives placent l’ombre à droite de l’élément. Les valeurs négatives la placent à gauche. V-offset spécifie la distance verticale. Une valeur positive place l’ombre sous l’élément, tandis qu’une valeur négative la place au-dessus. Si les deux valeurs sont 0, l’ombre apparaît directement derrière l’élément.
La troisième valeur est le rayon de flou. Elle est facultative. Plus le nombre est élevé, plus le flou devient grand et léger. Les valeurs négatives ne sont pas valides. Si elle est omise ou définie à 0, le bord de l’ombre est net.
La quatrième valeur est le rayon d’étalement. Elle est facultative. Les valeurs positives font s’étendre l’ombre, et les valeurs négatives la font rétrécir. Si elle est omise ou définie à 0, l’ombre a la même taille que l’élément.
La cinquième valeur est la couleur. Elle est facultative. Si elle est omise, la couleur par défaut de l’ombre est la couleur de texte calculée de l’élément.
La sixième valeur est le mot-clé inset. Il est facultatif et peut être placé n’importe où dans la définition de l’ombre. Lorsqu’il est présent, il crée une ombre interne au lieu d’une ombre portée.
| Valeur initiale | none |
|---|---|
| S’applique à | Tous les éléments. Elle s’applique aussi à ::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
Syntaxe de la propriété CSS box-shadow
box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;Essayons d’ajouter des ombres à un élément.
Exemple de la propriété box-shadow :
Exemple de la propriété CSS box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: 5px 4px 10px #1c87c9;
}
</style>
</head>
<body>
<h2>Box-shadow example</h2>
<div></div>
</body>
</html>Résultat
Ombres multiples
Vous avez la possibilité de séparer plusieurs fois box-shadow par des virgules. Par exemple, le code ci-dessous affichera 3 ombres avec plusieurs couleurs et positions sur le même élément.
Exemple d’utilisation de la propriété box-shadow pour ajouter plusieurs ombres à l’élément :
Exemple de la propriété CSS box-shadow avec plusieurs valeurs
<!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>Multiple shadows with box-shadow.</h2>
<div></div>
</body>
</html>Résultat
Maintenant, donnons à l’élément une valeur inset. Elle ajoute une ombre à l’intérieur de la boîte.
Exemple de la propriété box-shadow avec la valeur "inset" :
Exemple de la propriété CSS box-shadow avec la valeur inset
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
}
</style>
</head>
<body>
<h2>Box-shadow with inset value</h2>
<div></div>
</body>
</html>Résultat
Ombre sur un seul côté
Pour créer une ombre qui apparaît uniquement d’un côté d’une boîte, utilisez une valeur négative de rayon d’étalement.
Propriété CSS box-shadow
.shadow {
box-shadow: 0 10px 8px -4px yellow;
}Exemple de la propriété box-shadow avec une valeur négative de rayon d’étalement :
Exemple de la propriété box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
width: 100px;
height: 100px;
box-shadow: 0 10px 8px -4px yellow;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>Valeurs
| Valeur | Description | Play it |
|---|---|---|
| none | Aucune ombre n’est appliquée. | Play it » |
| h-offset | Obligatoire. Le décalage horizontal de l’ombre. Une valeur positive place l’ombre à droite de la boîte, une valeur négative la place à gauche de la boîte. | Play it » |
| v-offset | Obligatoire. Le décalage vertical de l’ombre. Une valeur positive place l’ombre sous la boîte, une valeur négative la place au-dessus de la boîte. | Play it » |
| blur-radius | Facultatif. L’ombre est floutée. Plus le nombre est élevé, plus l’ombre sera floue. Les valeurs négatives ne sont pas valides. | Play it » |
| spread-radius | Facultatif. L’ombre s’étale. Une valeur positive augmente la taille de l’ombre, une valeur négative la réduit. | Play it » |
| color | Facultatif. La couleur de l’ombre. Si elle est omise, elle prend par défaut la couleur du texte de l’élément. | Play it » |
| inset | Facultatif. Un mot-clé facultatif qui peut être placé n’importe où dans la définition de l’ombre. Il transforme une ombre externe en ombre interne. | Play it » |
| initial | Définit la propriété sur sa valeur par défaut. | Play it » |
| inherit | Hérite la propriété de son élément parent. |
Practice
Quelles propriétés peuvent être ajustées lors de la définition d’un box-shadow en CSS ?