Exercices CSS Avancé
10 exercices sur les animations, 3D, glassmorphism et CSS moderne.
Animation @keyframes
Tâche : Créez une animation bounceIn avec @keyframes (scale + opacity) et appliquez-la à .card. Gérez prefers-reduced-motion.
Transition + transform au hover
Tâche : Bouton avec transition cubic-bezier, translateY + scale au hover, et effet actif au clic.
Flip card 3D
Tâche : Carte flip 3D complète : perspective sur le container, preserve-3d sur .flipper, backface-visibility: hidden sur .front et .back.
Glassmorphism
Tâche : Créez une .glass-card avec backdrop-filter, fond rgba semi-transparent, border rgba, et box-shadow multiple.
Clip-path créatif
Tâche : Créez 4 formes avec clip-path : circle, triangle, hexagone, section en diagonale. Ajoutez une animation de révélation.
Filtres CSS
Tâche : Galerie photo avec filtre grayscale+contrast par défaut, transition vers couleur au hover. Logo avec drop-shadow.
Container Query
Tâche : Créez un widget qui passe en layout flex à partir de 400px de son container (pas de la fenêtre).
:has() sélecteur parent
Tâche : Utilisez :has() pour : styler .card différemment si elle a une image, mettre un label en gras si son input est checked, cacher un message d'erreur.
::before/::after décoratifs
Tâche : Lien avec soulignement animé via ::after. Badge avec compteur via ::before et data-count.
Animation Studio complet
Tâche finale : Combinez tout : @keyframes float+glow, glassmorphism, container query, transitions hover.