Tutoriel CSS Box Shadow - Comment ajouter une ombre portée à n'importe quel élément HTML

Nous pouvons ajouter une ombre portée à n'importe quel élément HTML en utilisant la propriété CSS box-shadow. Voici comment.

Ajout d'une ombre portée de base

Commençons par configurer quelques éléments HTML de base auxquels ajouter nos ombres portées:

 Box1 Box2 Box3 

Ensuite, ajoutez quelques CSS de base:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

Le résultat n'est que trois boîtes noires auxquelles il nous sera facile d'ajouter des ombres portées en appelant leurs identifiants uniques:

Configuration des éléments HTML

Pour ajouter une ombre portée de base, utilisons la box-shadowpropriété sur la boîte 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Ajout d'une ombre portée de base à la boîte 1

Nous avons 3 paramètres ici. Les 2 premiers sont, respectivement, le décalage x et le décalage y. Ils définissent l'emplacement de l'ombre portée.

Le décalage est relatif à l'origine, qui en HTML est toujours le coin supérieur gauche d'un élément. Un décalage x positif déplacera l'ombre vers la droite, et un décalage y positif déplacera l'ombre vers le bas.

Le troisième paramètre est la couleur de votre ombre portée.

Gardez à l'esprit que bien que nous ayons utilisé des éléments ici, la box-shadowpropriété peut également être appliquée à tout autre élément HTML.

Ajout d'un rayon de flou

Si nous voulons que l'ombre soit un peu plus réaliste, nous voudrons expérimenter avec le blur-radiusparamètre.

Ce paramètre contrôle le degré de flou de l'ombre pour qu'elle devienne plus grande et plus claire. Appliquons-le à l'encadré 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
Ajout d'un rayon de flou à la boîte 2

La valeur de 4px définit le rayon du flou à appliquer à notre ombre portée.

Ajout d'un rayon de propagation

Si nous voulons contrôler la taille de l'ombre, nous pouvons utiliser le spread-radiusparamètre qui contrôle la croissance ou la réduction d'une ombre.

Ajoutons un rayon de propagation de 8px à la boîte 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Ajout d'un rayon d'étalement en plus d'un flou à la boîte 2

Rappelez-vous l'ordre de ces paramètres!

Combinaison de plusieurs ombres dans une seule propriété

Si nous voulons avoir de la fantaisie, nous pouvons ajouter plusieurs ombres portées à un élément en utilisant une seule box-shadowpropriété.

Faisons cela avec Box 3 en ajoutant simultanément une ombre portée bleue et verte:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
combiner plusieurs ombres portées

Bonus: créer une ombre en médaillon

Bien qu'il ne crée pas d'ombre portée, le insetparamètre peut également être utilisé avec la box-shadowpropriété.

Comme son nom l'indique, ce paramètre crée une ombre en médaillon (c'est-à-dire une ombre à l'intérieur d'une boîte).

Le insetparamètre peut être placé au début ou à la fin du

box-shadowpropriété. Nous démontrons ici son utilisation avec un blockquoteélément.

HTML:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Créer une ombre incrustée

Bien sûr, vous pouvez ajouter un peu de flou et d'étendre pour améliorer l'ombre, voire plusieurs ombres:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Ombre en médaillon combinée à une ombre portée

Avec la box-shadowpropriété, nous pouvons facilement faire ressortir les éléments d'une page Web pour créer un bel effet d'éclairage 3D.

Si vous souhaitez expérimenter vous-même, voici un stylo de code que j'ai créé avec les exemples utilisés dans ce didacticiel.

Jouez et voyez ce que vous pouvez trouver!

Vous voulez voir plus de conseils et de connaissances sur le développement Web?

  • Abonnez-vous à ma newsletter hebdomadaire
  • Visitez mon blog à 1000 Mile World
  • Suis moi sur Twitter