Ombres

Podcast CSS – 017: Shadows

Disons qu'on vous a envoyé un design pour qu'il contienne une image de t-shirt, avec une ombre projetée. Le concepteur vous indique que l'image du produit est dynamique et peuvent être mises à jour via le système de gestion de contenu, donc l'ombre projetée doit aussi être dynamique. Au lieu d'un t-shirt, il peut s'agir d'une visière, d'un short ou de tout autre élément. Comment faire avec CSS ?

Le CSS propose box-shadow et propriétés 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 le cadre environnant, pas autour du T-shirt.

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

Ombre de la case

Navigateurs pris en charge

  • Chrome: 10. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5.1. <ph type="x-smartling-placeholder">

Source

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

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

Les valeurs de box-shadow sont classées dans l'ordre suivant:

  1. Décalage horizontal: un nombre positif le pousse de gauche à droite et un nombre négatif le pousse de droite à gauche.
  2. Décalage vertical: un nombre positif le pousse vers le bas du haut, et un nombre négatif le pousse vers le haut à partir du bas.
  3. Rayon du flou: un plus grand nombre produit une ombre plus floue, tandis qu'un faible nombre produit une ombre plus nette.
  4. Rayon de propagation (facultatif): un nombre plus élevé augmente la taille de l'ombre et un nombre plus faible la diminue. en lui attribuant la même taille que le rayon de flou s'il est défini sur 0.
  5. Couleur: Toute valeur de couleur valide. Si cette valeur n'est pas définie, la couleur du texte calculée est utilisée.

Pour transformer une ombre de boîte en ombre intérieure, plutôt que l'ombre externe par défaut, ajouter 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 l'ombre en zone

L'ajout d'un border-radius à votre boîte modifie également la forme de son ombre. En effet, le CSS crée une ombre basée sur 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 qui contient overflow: hidden, l'ombre ne sortira pas non plus de ce débordement.

<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

Navigateurs pris en charge

  • Chrome: 2. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 3.5. <ph type="x-smartling-placeholder">
  • Safari: 1.1. <ph type="x-smartling-placeholder">

Source

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 les mêmes que pour box-shadow et dans le même ordre. La seule différence est que text-shadow n'a ni valeur spread, ni mot clé inset.

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

.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. comme avec box-shadow. Ajoutez une collection de jeux de valeurs séparés par une virgule, et créer des effets de texte 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 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.

Testez vos connaissances

Testez 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 propagation
🎉
Couleur
Essayez encore.
inset
Essayez encore. inset est un mot clé, qui est également propre à box-shadow.

Seules 13 ombres de boîte sont autorisées sur un élément à la fois.

Vrai
Il n'y a aucune limite officielle.
Faux
Ajoutez autant d'ombres en cases que nécessaire.