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 ressortir les éléments 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 grande crée une ombre plus floue. S'il est omis, sa valeur par défaut est 0 (pas de flou).

spread (optionnel) : Le rayon d'étalement de l'ombre (spread radius). Les valeurs positives font s'étendre l'ombre, et les valeurs négatives la font se réduire.

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 externe (outset) en une ombre interne.

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 d'étalement 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).

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>