Ombres

Podcast The CSS – 017: Shadows

Supposons qu'un modèle vous ait été envoyé et qu'il contienne l'image d'un t-shirt découpé avec une ombre projetée. Le concepteur vous indique que l'image du produit est dynamique et qu'elle peut être mise à jour via le système de gestion de contenu. L'ombre projetée doit donc également être dynamique. Au lieu d'un t-shirt, l'image peut être une visière, un short ou tout autre article. Comment y parvenir avec le CSS ?

CSS possède les propriétés box-shadow et text-shadow, mais l'image n'est pas du texte. Vous ne pouvez donc pas utiliser text-shadow. Si vous utilisez box-shadow, l'ombre se trouve sur la boîte environnante et non autour du t-shirt.

Heureusement, il existe une autre option: le filtre drop-shadow(). Cela vous permet de faire exactement ce que le concepteur a demandé. Il existe de nombreuses options en matière d'ombres en CSS, chacune étant conçue pour un cas d'utilisation différent.

Ombre de la case

La propriété box-shadow permet d'ajouter des ombres à la zone d'un élément HTML. Elle fonctionne sur les éléments de bloc et les éléments intégrés.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

Les valeurs de box-shadow s'affichent dans l'ordre suivant:

1. Décalage horizontal : un nombre positif le pousse vers l'extérieur, tandis qu'un nombre négatif le pousse vers la droite.
2. Décalage vertical : un nombre positif le pousse vers le bas, et un nombre négatif le pousse vers le haut.
3. Rayon de flou : un nombre plus élevé produit une ombre plus floue, tandis qu'un petit nombre produit une ombre plus nette.
4. Rayon de flou (facultatif) : un nombre plus élevé augmente la taille de l'ombre, tandis qu'un nombre inférieur la réduit. Il est identique au rayon de flou s'il est défini sur 0.
5. Couleur : toute valeur de couleur valide. Si cet attribut n'est pas défini, la couleur du texte calculée sera utilisée.

Pour faire d'une ombre de zone une ombre intérieure plutôt que l'ombre extérieure par défaut, ajoutez un mot clé inset avant les autres propriétés.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Ombres multiples

Vous pouvez ajouter autant d'ombres que vous le souhaitez avec box-shadow. Pour ce faire, ajoutez une collection d'ensembles de valeurs séparés par une virgule:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Propriétés affectant le paramètre "box-shadow"

L'ajout d'un border-radius à votre boîte affecte également la forme de l'ombre de la boîte. En effet, CSS crée une ombre en fonction de la forme de la zone, comme si la lumière pointe vers elle.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Si la boîte contenant box-shadow se trouve dans un conteneur comportant overflow: hidden, l'ombre ne sortira pas de ce débordement non plus.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Ombre du texte

La propriété text-shadow est très semblable à la propriété box-shadow. Elle ne fonctionne que sur les nœuds de texte.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

Les valeurs de text-shadow sont identiques à box-shadow et dans le même ordre. La seule différence est que text-shadow n'a pas de valeur spread ni de mot clé inset.

Lorsque vous ajoutez un box-shadow, il est rogné à la forme de votre boîte, mais text-shadow n'est pas rogné. Cela signifie que si votre texte est entièrement ou semi-transparent, l'ombre y est visible.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Ombres multiples

Vous pouvez ajouter autant d'ombres que vous le souhaitez avec text-shadow, tout comme avec box-shadow. Ajoutez des ensembles de valeurs séparés par une virgule et créez des effets de texte particulièrement intéressants, comme du texte en 3D.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Ombre projetée

Pour obtenir une ombre projetée qui suit les courbes potentielles d'une image, utilisez le filtre CSS drop-shadow. Cette ombre est appliquée à un masque alpha, ce qui la rend très utile pour ajouter une ombre à une image en découpe, comme dans le cas de l'introduction de ce module.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

Le filtre drop-shadow a les mêmes valeurs que box-shadow, mais le mot clé inset et la valeur spread ne sont pas autorisés. Vous pouvez ajouter autant d'ombres que vous le souhaitez en ajoutant plusieurs instances de valeurs drop-shadow à la propriété filter. Chaque ombre utilisera la dernière ombre comme point de référence de positionnement.

Testez vos connaissances

Tester vos connaissances sur les ombres