Comment fonctionne filter
La propriété filter applique des effets graphiques à un élément au moment où le navigateur le dessine : le
fichier de l’image ne change pas. On peut enchaîner plusieurs fonctions séparées par des espaces, et l’ordre
compte : chacune s’applique au résultat de la précédente. Cet outil les écrit toujours dans le même ordre.
grayscale(),sepia()etinvert()vont de 0 % (aucun effet) à 100 %.brightness(),contrast()etsaturate()partent de 100 % : en dessous ils réduisent, au-dessus ils augmentent.hue-rotate()fait tourner toutes les couleurs sur le cercle chromatique, en degrés.blur()floute, en pixels.drop-shadow()dessine une ombre qui suit la silhouette, y compris celle d’un PNG transparent.
Usages courants
- Logos clients en gris qui reprennent leurs couleurs au survol : cochez l’option de survol.
- Texte sur une photo : baisser la luminosité (
brightness(60%)) rend le texte blanc lisible sans retoucher l’image. - Arrière-plans flous derrière une fenêtre modale ou une carte. Pour flouter ce qui se trouve derrière un élément, la propriété est
backdrop-filter. - États désactivés :
grayscale(100%) opacity(50%)sur un produit épuisé.
Filtres côté serveur avec /random
Les photos aléatoires de ximg.es acceptent deux filtres directement dans l’URL, appliqués à la génération de l’image :
?grayscale pour le noir et blanc et ?blur=1…10 pour le flou. La différence avec le CSS, c’est
que l’image arrive déjà filtrée : aucun coût d’affichage, et cela fonctionne là où vous ne maîtrisez pas le CSS, comme
dans un e-mail :
<img src="https://ximg.es/random/800x600?seed=couverture&grayscale&blur=3" alt="">Plus d’options pour les images dans le générateur.
Performances
Les filtres de couleur sont peu coûteux. blur() et drop-shadow() avec de grands rayons coûtent
davantage, surtout animés ou appliqués à de nombreux éléments à la fois. Si un filtre ne change jamais et que l’image
vous appartient, mieux vaut parfois l’appliquer à l’export.