Shadow

Classes utilitaires pour appliquer une ombre portée via box-shadow. Disponibles en version statique et en variante hover avec état de repos et état survolé distincts.

Stable CSS uniquement

Aperçu

LIVE PREVIEW — OMBRES

.shadow

.shadow-hover
survolez-moi

.shadow-none

Classes CSS

CLASSE	PROPRIÉTÉ APPLIQUÉE	DESCRIPTION
`.shadow`	`box-shadow: var(--box-shadow)`	Ombre statique permanente.
`.shadow-none`	`box-shadow: none`	Supprime toute ombre portée. Utile pour neutraliser une ombre héritée.

Variante hover

La classe .shadow-hover définit deux états distincts : une ombre au repos via --box-shadow-hover-before et une ombre au survol via --box-shadow-hover-after, avec une transition de 0.2s ease.

LIVE PREVIEW — HOVER

.shadow-hover
survolez-moi

ÉTAT	PROPRIÉTÉ APPLIQUÉE	TRANSITION
Au repos	`box-shadow: var(--box-shadow-hover-before)`	`box-shadow 0.2s ease`
Au survol `:hover`	`box-shadow: var(--box-shadow-hover-after)`	`box-shadow 0.2s ease`

ℹ️ Transition

La propriété transition est déclarée sur .shadow-hover directement, pas uniquement sur :hover. L'animation joue donc dans les deux sens : à l'entrée et à la sortie du survol.

CSS Custom Properties

TOKEN	UTILISÉ PAR
`--box-shadow`	`.shadow`
`--box-shadow-hover-before`	`.shadow-hover` (état de repos)
`--box-shadow-hover-after`	`.shadow-hover:hover` (état survolé)

Notes & bonnes pratiques

✅ À faire

Utiliser .shadow-none pour neutraliser une ombre héritée d'un composant parent, plutôt que de surcharger box-shadow directement en CSS.

❌ À éviter

Ne pas combiner .shadow et .shadow-hover sur le même élément : .shadow-hover définit déjà sa propre ombre au repos via --box-shadow-hover-before, les deux déclarations entreront en conflit.

Shadow · WEBDEV-UI DOCS / V1