Fond, bordures & ombres
Forger et enchanter tes éléments.
Imagine : tu es dans ta forge magique. Le HTML t'a livré un lingot de métal brut. Ton travail d'artisan CSS est de le transformer en un objet légendaire.
Pour cela, tu as trois étapes : choisir le matériau (le fond), forger les contours (la bordure), et enfin, appliquer l'enchantement (l'ombre).
7.1 Le matériau de base : background
Le fond est la substance même de ton objet. Tu peux utiliser une couleur unie, une texture ou même un dégradé magique.
.item-divin-v1 {
background-image: radial-gradient(circle, #c4b5fd, #6d28d9);
}7.2 La forge des contours : border et border-radius
Maintenant que tu as ton matériau, il faut lui donner une forme. La propriété border forge les bords, tandis que border-radius les polit pour arrondir les angles.
.item-divin-v2 {
background-image: radial-gradient(circle, #c4b5fd, #6d28d9);
border: 2px solid #facc15;
border-radius: 12px;
}7.3 L'enchantement final : box-shadow
C'est la touche finale qui fait passer ton objet de "joli" à "légendaire". Le box-shadow ajoute une ombre ou une aura lumineuse.
La syntaxe de box-shadow est : décalage-X décalage-Y flou couleur.
.item-divin-v3 {
/* ... background & border ... */
box-shadow: 0 0 20px #a78bfa;
}Bonus : L'aura sur le texte avec text-shadow
.titre-legendaire {
color: white;
text-shadow: 0 0 10px #fde047; /* Aura dorée */
}