Ombres

The CSS Podcast - 017: Shadows

Supposons que vous ayez reçu une conception à créer. Elle comporte une image d'un t-shirt découpé avec une ombre portée. Le concepteur vous indique que l'image du produit est dynamique et peut être modifiée via le système de gestion de contenu. L'ombre portée doit donc également être dynamique. Au lieu d'un t-shirt, l'image peut être un chapeau, un short ou tout autre article. Comment faire cela avec CSS ?

Le CSS dispose des propriétés box-shadow et text-shadow, mais l'image n'étant pas du texte, vous ne pouvez pas utiliser text-shadow. Si vous utilisez box-shadow, l'ombre se trouve sur le cadre qui l'entoure, et non autour du t-shirt.

Heureusement, il existe une autre option: le filtre drop-shadow(). Vous pouvez ainsi faire exactement ce que le concepteur a demandé. Il existe de nombreuses options pour les ombres en CSS, chacune conçue pour un cas d'utilisation différent.

Ombre de la case

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

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

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

L'ordre des valeurs pour box-shadow est le suivant:

  1. Décalage horizontal : un nombre positif le repousse vers la gauche et un nombre négatif le repousse vers la droite.
  2. Décalage vertical : un nombre positif le fait descendre depuis le haut, et un nombre négatif le fait remonter depuis le bas.
  3. Rayon de floutage : un nombre plus élevé produit une ombre plus floue, tandis qu'un nombre plus faible produit une ombre plus nette.
  4. Rayon de diffusion (facultatif) : un nombre plus élevé augmente la taille de l'ombre, tandis qu'un nombre plus faible la réduit, ce qui la rend de la même taille que le rayon de floutage s'il est défini sur 0.
  5. Couleur : toute valeur de couleur valide. Si cette valeur n'est pas définie, la couleur de texte calculée est utilisée.

Pour faire d'une ombre portée 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;
}

Plusieurs ombres

Vous pouvez ajouter autant d'ombres que vous le souhaitez avec box-shadow. Pour ce faire, ajoutez une collection de jeux 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 box-shadow

Ajouter un border-radius à votre zone aura également un impact sur la forme de l'ombre de la zone. En effet, le CSS crée une ombre en fonction de la forme de la boîte, comme si une lumière la pointait.

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

Si votre zone avec box-shadow se trouve dans un conteneur contenant overflow: hidden, l'ombre ne sortira pas de cet overflow.

<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

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

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

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

Les valeurs de text-shadow sont les mêmes que celles de 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é en fonction de la forme de votre zone, mais text-shadow n'est pas rogné. Cela signifie que si votre texte est entièrement ou semi-transparent, l'ombre est visible à travers lui.

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

Plusieurs ombres

Vous pouvez ajouter autant d'ombres que vous le souhaitez avec text-shadow, tout comme avec box-shadow. Ajoutez une collection de jeux de valeurs séparés par une virgule pour créer des effets de texte vraiment sympas, 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 porté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 découpée, comme dans 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.

Vérifier vos connaissances

Tester vos connaissances sur les ombres

Quelle valeur d'ombre ci-dessous est propre à box-shadow ?

Décalage horizontal
Essayez encore.
Décalage vertical
Essayez encore.
Rayon du flou
Essayez encore.
Rayon de l'épandeur
🎉
Couleur
Essayez encore.
inset
Essayez encore. inset est un mot clé propre à box-shadow.

Vous ne pouvez appliquer qu'un maximum de 13 ombres portées à la fois à un élément.

Vrai
Il n'existe aucune limite officielle.
Faux
Ajoutez autant d'ombres portées que nécessaire.