Effets visuels

Deux effets simples suffisent souvent :

.card { border-radius: 12px; }
.card { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); }

Rester subtile pour conserver clarté et performance.

L'idée n'est pas d'empiler des effets, mais de guider le regard avec des details légers et cohérents.

Un design propre est souvent celui qui en fait juste assez.

A retenir

Les effets visuels doivent soutenir la hiérarchie, pas devenir le sujet principal de l'interface.

Priorise la cohérence : si une ombre signifie "élément interactif", évite de l'appliquer partout sans distinction.

Mini pratique

Applique un border-radius et une ombre sur une carte, puis reduis progressivement l'intensité jusqu'à un rendu sobre.

Teste enfin ton rendu sur fond clair et fond plus sombre pour contrôler la qualité perçue du contraste.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.