Chargement...

Filtres CSS

Les animations ont écrit une chronologie. Les transforms ont déplacé où vont les pixels. Les filtres changent comment ces pixels apparaissent : flou doux derrière une modale, vignettes en niveaux de gris qui reprennent leurs couleurs au survol, photo rehaussée en luminosité et contraste — toujours dans la même place du flux.

Ce que fait filter

La propriété filter applique un ou plusieurs effets de post-traitement sur le rendu peint d’un élément (souvent avec ses descendants, comme un groupe). Largeur, hauteur et flux du document restent identiques ; seul le résultat visuel change. filter: none (valeur initiale) supprime les effets.

Vous enchaînez les fonctions dans une seule valeur filter, séparées par des espaces — même esprit que les transforms, mais ici les outils sont visuels, pas spatiaux : filter: brightness(1.1) contrast(1.05) saturate(1.2);

Les fonctions filter en un coup d’œil

📊 Fonctions filter CSS courantes

Fonction Rôle typique
blur(radius) Adoucir les bords / effet givré (px ou longueur similaire)
brightness(%) Éclaircir ou assombrir (1 / 100% = inchangé)
contrast(%) Renforcer ou aplatir la plage tonale
grayscale(%) Retirer la couleur (1 = gris total)
saturate(%) Booster ou atténuer l’intensité des couleurs
hue-rotate(angle) Faire tourner les teintes sur la roue chromatique
opacity(%) Estomper le résultat filtré (proche de, mais distinct de, la propriété opacity)
sepia(%) / invert(%) Ton vintage chaud / inversion des tons
drop-shadow(…) Ombre qui suit la forme alpha (icônes, contours de texte)
none Retirer les filtres

Pourcentages et nombres nus fonctionnent souvent tous les deux (grayscale(1) ≈ grayscale(100%)). Choisissez un style dans le projet et tenez-vous-y.

Cartes en gris qui s’animent au survol

Classique de galerie : atténuées par défaut, couleurs pleines au survol. Ajoutez une transition courte sur filter pour que le retour paraisse voulu — le mouvement vient des leçons précédentes, le rendu de celle-ci.

Vignette grayscale qui reprend la couleur au survol

css 
.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) = couleurs pleines. Réservez la transition sur filter aux changements légers ; animer un gros flou sur de grandes photos coûte cher.

Flou doux pour mettre en avant

blur() adoucit l’élément. Un rayon modeste sur une surcouche ou un fond — pas sur tout le body — garde le texte lisible.

Panneau flouté derrière une modale

css 
.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

Flouter un gros ancêtre floute aussi son texte. Mieux vaut flouter une couche de fond (ou utiliser backdrop-filter ci-dessous) quand l’avant-plan doit rester net.

Luminosité et contraste pour les photos

Visuels produit et images hero : un léger étalonnage sans ouvrir un logiciel de retouche.

Étalonnage photo avec brightness et contrast

css 
.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

Un peu au-dessus de 1 éclaircit ou renforce le contraste ; en dessous de 1, on recule. De petits ajustements = finition ; de gros sauts = faux.

Empiler plusieurs filtres

Une seule déclaration peut mélanger ton, couleur et douceur. L’ordre compte sur des piles complexes — écrivez l’effet voulu de gauche à droite et vérifiez dans le navigateur.

Pile saturate, hue-rotate et léger blur

css 
.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

Commencez par une ou deux fonctions. N’en ajoutez que si le design le demande — chaque filtre de plus charge le GPU sur de grandes surfaces.

drop-shadow() vs box-shadow

box-shadow suit la boîte de bordure. drop-shadow() suit la silhouette alpha — idéal pour les PNG transparents et les icônes dont l’ombre doit épouser le glyphe, pas un rectangle.

Ombre d’icône avec drop-shadow filter

css 
.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() ne prend pas en charge inset comme box-shadow. Pour une carte en retrait, gardez box-shadow de la leçon Effects.

Backdrop filter — flouter ce qui est derrière

backdrop-filter agit sur le contenu visible à travers un élément translucide (verre dépoli). Il faut un fond semi-transparent ; sinon rien à échantillonner.

Exemple : sur un en-tête fixe au-dessus d’un hero chargé, background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);. Bon support sur les navigateurs modernes ; gardez un fond opaque de secours si le flou peut être ignoré.

Opacité dans le filtre vs propriété opacity

filter: opacity(0.5) estompe le rendu filtré. La propriété opacity estompe l’élément et crée souvent un groupe de composition qui influence l’empilement et les enfants. Pour « tout le contrôle, enfants compris, s’estompe ensemble », la propriété opacity est en général plus claire. Utilisez opacity() dans le filtre quand elle fait partie d’une pile de filtres avec flou ou étalonnage couleur.

À vous de jouer

  1. Mettez filter: grayscale(1) sur l’image d’une carte ; repassez à grayscale(0) au :hover avec transition: filter 0.2s ease.
  2. Adoucissez une couche de fond avec blur(8px) ; laissez le texte de premier plan sans filtre.
  3. Étalonnez une photo avec brightness(1.1) contrast(1.05) ; ramenez les deux vers 1 jusqu’à un rendu naturel.
  4. Empilez saturate(1.4) hue-rotate(20deg) sur un sticker ; retirez une fonction et comparez.
  5. Ombre d’une icône PNG transparente avec drop-shadow(...) ; comparez avec box-shadow sur une boîte carrée.
  6. Optionnel : barre givrée avec background translucide + backdrop-filter: blur(12px).

Erreurs fréquentes

  • Appliquer un fort blur() sur une grande zone de page avec du texte lisible
  • Attendre que drop-shadow() accepte inset comme box-shadow
  • Utiliser filter: opacity() quand un simple opacity sur l’élément serait plus clair
  • Animer des filtres lourds sur de grandes images à chaque frame de scroll sans vérifier les perfs
  • Mettre backdrop-filter sur un fond totalement opaque — rien ne transparaît, donc pas d’effet givré

Récapitulatif

  • filter change l’apparence des pixels peints ; le flux de mise en page reste en place
  • Enchaînez blur, brightness, contrast, grayscale, saturate, etc. dans une seule valeur
  • Préférez drop-shadow() pour les ombres suivant l’alpha ; box-shadow pour l’élévation de boîte
  • backdrop-filter givre ce qui apparaît derrière une couche translucide
  • Effects & Motion se clôt ici ; le module suivant est Modern Toolkit — en commençant par les variables CSS

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
6
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 62 de 63
Css Tutoriel