Ombre de boîte

Fait partie de la section Style avec 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 donnent l’impression que les éléments « ressortent » de la page ou créent de la profondeur et du relief.

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 de shadow par rapport à l’élément sur l’axe horizontal. Les valeurs positives déplacent shadow vers la droite, et les valeurs négatives le 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 (facultatif) : Le rayon de flou de l’ombre. Une valeur plus grande crée une ombre plus floue. S’il est omis, sa valeur par défaut est 0 (aucun flou).

spread (facultatif) : Le rayon d’expansion de l’ombre. Les valeurs positives font s’étendre l’ombre, tandis que les valeurs négatives la font rétrécir.

color (facultatif) : La couleur de l’ombre. Elle peut être spécifiée à l’aide de couleurs nommées, de valeurs hexadécimales, de valeurs RGB ou de valeurs HSL.
inset (facultatif) : Transforme l’ombre extérieure (outset) en 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 portée 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 possédant la classe button ont une ombre portée avec un décalage horizontal de 2px, un décalage vertical de 2px, un rayon de flou de 5px, un rayon d'étalement de 2px et une couleur noire semi-transparente (rgba(0, 0, 0, 0.5)).

Défi

Facile

Un document HTML vous est fourni 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 box-shadow sur 10px 10px 5px gray.
Écrivez une règle CSS qui cible l’élément <p>. Définissez box-shadow sur -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

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>