Box Shadow

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 42 sur 76.

En CSS, la propriété box-shadow est utilisée pour ajouter des effets d'ombre à la boîte d'un élément. Cette propriété vous permet de créer des effets visuellement attrayants qui font paraître les éléments comme s'ils se détachaient de la page ou créent de la profondeur et de la dimension.

Voici la syntaxe de base pour utiliser la propriété box-shadow :

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset : La distance horizontale de l'ombre par rapport à l'élément. Les valeurs positives déplacent l'ombre vers la droite, et les valeurs négatives la déplacent vers la gauche.

vertical-offset : La distance verticale de l'ombre par rapport à l'élément. Les valeurs positives déplacent l'ombre vers le bas, et les valeurs négatives la déplacent vers le haut.

blur (optionnel) : Le rayon de flou de l'ombre. Une valeur plus élevée crée une ombre plus floue. Si elle est omise, la valeur par défaut est 0 (pas de flou).

spread (optionnel) : Le rayon de diffusion de l'ombre. Les valeurs positives font s'étendre l'ombre, et les valeurs négatives la font rétrécir.

color (optionnel) : La couleur de l'ombre. Elle peut être spécifiée à l'aide de noms de couleurs, de valeurs hexadécimales, de valeurs RGB ou de valeurs HSL.
inset (optionnel) : Transforme l'ombre extérieure (outset) en une ombre intérieure.

Par exemple :

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Dans cet exemple, tous les éléments <div> ont une ombre de boîte avec un décalage horizontal de 5px, un décalage vertical de 5px, un rayon de flou de 10px et une couleur grise. Les éléments avec la classe button ont une ombre de boîte avec un décalage horizontal de 2px, un décalage vertical de 2px, un rayon de flou de 5px, un rayon de propagation de 2px et une couleur noire semi-transparente (rgba(0, 0, 0, 0.5)).

Défi

Facile

Vous disposez d'un document HTML avec une division (<div>) et un paragraphe (<p>). Votre tâche consiste à utiliser la propriété box-shadow pour ajouter des effets d'ombre à ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div>. Définissez le box-shadow sur 10px 10px 5px gray.
Écrivez une règle CSS qui cible l'élément <p>. Définissez le box-shadow sur -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Aide-mémoire

La propriété box-shadow ajoute des effets d'ombre aux éléments :

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset : Distance horizontale (positif = droite, négatif = gauche)
vertical-offset : Distance verticale (positif = bas, négatif = haut)
blur (optionnel) : Rayon de flou (plus grand = plus flou)
spread (optionnel) : Rayon de propagation (positif = agrandir, négatif = rétrécir)
color (optionnel) : Couleur de l'ombre
inset (optionnel) : Crée une ombre interne au lieu d'une ombre externe

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Essayez vous-même

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>