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:
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; }
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; }
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; }
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; }
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; }
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;
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