6.1 Propriété box-shadow
La propriété box-shadow en CSS est utilisée pour ajouter des ombres aux éléments. Cette propriété permet de créer divers effets visuels, améliorant l'apparence des pages web. Examinons en détail la syntaxe, les valeurs et des exemples d'utilisation de box-shadow.
Syntaxe de box-shadow
La propriété box-shadow prend une ou plusieurs valeurs, chacune définissant les paramètres de l'ombre. La syntaxe générale ressemble à ceci :
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Valeurs :
offset-x: décalage horizontal de l'ombre. Les valeurs positives déplacent l'ombre vers la droite, les négatives — vers la gaucheoffset-y: décalage vertical de l'ombre. Les valeurs positives déplacent l'ombre vers le bas, les négatives — vers le hautblur-radius: rayon de flou de l'ombre. Plus la valeur est grande, plus l'ombre sera floue. Valeur par défaut — 0 (ombre sans flou)spread-radius: rayon d'expansion de l'ombre. Les valeurs positives augmentent la taille de l'ombre, les négatives — la diminuent. Valeur par défaut — 0color: couleur de l'ombre. Tous les formats de couleur CSS sont pris en charge
6.2 Exemples d'utilisation
Ombre de base :
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Ombre de base</div>
</body>
Ombre avec flou :
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Ombre avec flou</div>
</body>
Ombre avec expansion :
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Ombre avec expansion</div>
</body>
Ombre intérieure :
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Ombre intérieure</div>
</body>
6.3 Paramètres de box-shadow
Détails de la configuration box-shadow :
Décalage de l'ombre (offset-x et offset-y)
- Valeurs positives : l'ombre se décale vers la droite (
offset-x) et vers le bas (offset-y) - Valeurs négatives : l'ombre se décale vers la gauche (
offset-x) et vers le haut (offset-y)
Flou de l'ombre (blur-radius)
- Valeur 0 : l'ombre sera nette, sans flou
- Valeurs positives : plus la valeur est grande, plus l'ombre sera floue
Expansion de l'ombre (spread-radius)
- Valeurs positives : l'ombre augmente en taille
- Valeurs négatives : l'ombre diminue en taille
Couleur de l'ombre (color)
La couleur peut être définie dans différents formats : nom de la couleur, code hexadécimal, RGB, RGBA, HSL, HSLA.
Ombre intérieure (inset)
Le mot-clé inset crée une ombre à l'intérieur de l'élément, pouvant être utilisé pour créer un effet enfoncé.
Plusieurs ombres avec des paramètres différents :
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Plusieurs ombres</div>
</body>
GO TO FULL VERSION