Le CSS filter la propriété ressemble à un raccourci de style : une ligne tourne une photo en noir et blanc, brouille un arrière-plan ou réchauffe une vignette, sans éditeur d'image impliqué C'est cela. Cela change également la façon dont le navigateur positionne et superpose l'élément auquel il est appliqué, c'est pourquoi un filtre ajouté pour un effet de vol stationnaire peut discrètement décomposer trois composants.
Ce guide couvre ce que chaque fonction de filtre fait aux valeurs de pixels, pourquoi les mêmes fonctions dans un ordre différent produisent une image différente, comment les filtres se comportent dans la mise en page et l'animation, et où ils coûtent des performances Il utilise le libre Générateur de filtres CSS pour créer les déclarations, mais chaque exemple est un CSS simple, vous pouvez coller n'importe où.
tl;dr : Le CSS
filterla propriété applique des effets graphiques tels que le flou, la luminosité, le contraste, le niveaux de gris, le sépia, la saturation, l'inversion, la rotation des teintes et l'opacité à un élément et à tout ce qu'il contient, dans l'ordre d'écriture des fonctions. Toute valeur autre quenonecrée également un contexte d'empilement et devient le bloc contenant pour les enfants fixes et absolument positionnés, ce qui est la cause habituelle de " ; mon modal est coincé à l'intérieur d'une carte" ; Le générateur de filtres CSS Toolz construit la déclaration avec des curseurs et un aperçu en direct, écrit uniquement les fonctions que vous avez modifiées et exécute côté client, gratuitement, sans inscription.
Quelle est la propriété de filtre CSS ?
La propriété de filtre CSS applique des effets de traitement d'image à un élément avant qu'il ne soit dessiné sur la page L'effet couvre l'élément' ; tout son rendu : son arrière-plan, ses bordures, son texte, ses images et ses éléments fils Il est défini dans le W3C Module Effets de filtre Niveau 1 et pris en charge dans tous les navigateurs actuels ; le Référence MDN pour filtre répertorie les détails de compatibilité.
Une déclaration est une liste de fonctions de filtre séparées par des espaces :
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
Les fonctions s'exécutent de gauche à droite Chacune prend la sortie de la précédente comme entrée, ce qui est la clé pour comprendre pourquoi l'ordre compte.
Les filtres ne modifient pas le fichier image Le navigateur les applique chaque fois qu'il peint, de sorte que l'original reste intact et vous pouvez modifier ou supprimer l'effet avec une ligne de CSS.
Que fait chaque fonction de filtre ?
Chaque fonction a une valeur d'identité qui laisse l'élément inchangé Le générateur Toolz utilise cela pour garder la sortie courte : toute fonction laissée à sa valeur d'identité est omise du CSS.
| Fonction | Ce qu'il fait | Identité | Gamme de curseurs de générateur |
|---|---|---|---|
blur() |
Flou gaussien avec le rayon donné | 0px |
0 à 20px |
brightness() |
Multiplie chaque canal de couleur | 100% |
0 à 200% |
contrast() |
Repousse les canaux loin ou vers le gris moyen | 100% |
0 à 200% |
saturate() |
Augmente ou diminue l'intensité de la couleur | 100% |
0 à 200% |
grayscale() |
Se fond vers un gris de luminance égale | 0% |
0 à 100% |
sepia() |
Se fond vers un ton brun chaud | 0% |
0 à 100% |
invert() |
Retourne chaque canal vers son opposé | 0% |
0 à 100% |
hue-rotate() |
Fait pivoter les couleurs autour de la roue chromatique | 0deg |
0 à 360 degrés |
opacity() |
Rend l'élément plus transparent | 100% |
0 à 100% |
La spécification autorise des valeurs au-delà de certaines de ces plages, telles que brightness(300%). Les curseurs couvrent les plages utiles pour les ajustements de style photo ; vous pouvez saisir manuellement une valeur plus grande dans votre CSS.
La spécification définit également drop-shadow()[traduction], que le générateur ne comporte pas Contrairement box-shadow, drop-shadow() suit la forme visible d'images transparentes telles que les icônes PNG, plutôt que la boîte rectangulaire element' ; s. Pour les ombres rectangulaires, le guide d'ombre de boîte couvre la propriété plus flexible.
Comment les filtres de couleur modifient-ils les valeurs des pixels ?
La plupart des filtres de couleur sont de simples arithmétiques sur les canaux rouge, vert et bleu, chacun traité comme un nombre de 0 à 1. la spécification Filter Effects définit chacun comme une formule ou une matrice 3 par 3. travaillés sur quelques couleurs, ils deviennent prévisibles.
luminosité(150%) multiplie chaque canal par 1,5. un gris moyen de rgb (100, 100, 100) devient rgb (150, 150, 150).Les valeurs qui dépasseraient 255 sont coupées, c'est pourquoi une luminosité élevée lave les reflets en blanc pur.
contraste (200%) applique (valeur - 0,5) × 2 + 0,5 à chaque canal Un gris foncé à 0,25 (environ 64) devient (0,25 - 0,5) × 2 + 0,5 = 0, noir Un gris clair à 0,75 devient 1,0, blanc Tout s'étale à partir du milieu.
niveaux de gris (100%) remplace chaque pixel par un gris basé sur la luminance, en utilisant des poids de 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu Le rouge pur, rgb (255, 0, 0), devient 0,2126.155 = environ 54, donc rgb (54, 54, 54).Le vert pur devient un gris beaucoup plus clair d'environ 182. C'est pourquoi une conversion en niveaux de gris garde le sentiment que le vert est plus brillant que le rouge.
sépia(100%) mélange les canaux avec des coefficients pondérés à chaud Pour la sortie rouge la formule est 0.393 R + 0.769 G + 0.189 B. Le blanc entre comme (1, 1, 1) et sort comme à peu près (1.35, 1.20, 0.94), qui se clipse sur rgb (255, 255, 239) : le blanc devient une crème faible.
Ces chiffres proviennent de l'application directe des formules specification' ; s. A l'écran, l'arrondi et la gestion des couleurs peuvent déplacer un résultat d'une unité ou deux.
Pourquoi l'ordre des fonctions de filtrage modifie-t-il le résultat ?
Les filtres sont appliqués en séquence, donc chaque fonction fonctionne sur la sortie précédente function' ; s. Lorsqu'une fonction supprime des informations, comme la suppression de couleur en niveaux de gris, tout ce qui s'exécute après elle a moins à travailler.
Prenez du bleu pur, rgb (0, 0, 255) et appliquez du gris et du sépia à 100 % dans les deux ordres.
filter: grayscale(100%) sepia(100%);
- Échelle de gris en premier : le bleu a une luminance de 0,0722, donc le pixel devient un gris foncé de 0,0722 sur chaque canal, environ rgb (18, 18, 18).
- Sépia seconde : le rouge devient 0,0722 × (0,393 + 0,769 + 0,189) = 0,0975, le vert devient 0,0722 × 1,203 = 0,0869, le bleu devient 0,0722 × 0,937 = 0,0677.
- Résultat : à propos rgb(25, 22, 17)1, un brun chaud très foncé.
filter: sepia(100%) grayscale(100%);
- Sepia d'abord : le rouge devient 0,189, le vert 0,168, le bleu 0,131, un brun foncé.
- Deuxième échelle de gris : la luminance est de 0,2126 × 0,189 + 0,7152 × 0,168 + 0,0722 × 0,131 = 0,170.
- Résultat : à propos rgb(43, 43, 43): un gris neutre sans aucune teinte.
Deux mêmes fonctions, ordre différent, et un résultat est tonique alors que l'autre ne l'est pas La règle générale : mettez d'abord les fonctions de suppression de couleur si vous voulez une fonction ultérieure pour teinter le résultat, et la dernière si vous voulez une image finale neutre.
Le générateur écrit toujours les fonctions dans un ordre fixe : flou, luminosité, contraste, saturé, niveaux de gris, sépia, inverti, teinte-rotate, opacité Donc l'échelle de gris vient toujours avant sépia, ce qui donne la version tonique Si vous avez besoin d'un ordre différent, copiez le CSS et réorganisez les fonctions à la main.
Que produisent les préréglages ?
Le générateur s'ouvre sur le préréglage Vintage Ce sont les déclarations exactes que chaque préréglage écrit :
| Préréglé | Css généré |
|---|---|
| nul | filter: none; |
| Échelle de gris | filter: grayscale(100%); |
| Vintage | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| Chaleureux | filter: brightness(105%) saturate(140%) sepia(25%); |
| Cool | filter: saturate(120%) hue-rotate(200deg); |
| Dramatique | filter: brightness(90%) contrast(150%) saturate(120%); |
| Fané | filter: brightness(110%) saturate(80%) opacity(80%); |
| Inverser | filter: invert(100%); |
| Flou | filter: blur(4px); |
Les préréglages sont des points de départ Cliquez sur Chaud, puis faites glisser Blur sur 2 px, et la sortie devient filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. Cliquez sur Aucun ou Réinitialiser et il revient à filter: none;.
Le préréglage Cool est plus fort que son nom ne l'indique : une rotation de teinte à 200 degrés déplace les oranges vers le bleu et le bleu vers l'orange. Il se lit comme " ; cool" ; sur les photos chaudes et comme un changement de couleur important sur tout le reste.
L'aperçu est un échantillon fixe d'un dégradé bleu, orange et vert avec quelques formes, pas un téléchargement Il montre comment chaque fonction déplace la couleur, le contraste et le flou, mais testez toujours le CSS copié sur votre image réelle, car un filtre qui flatte un dégradé peut paraître boueux sur un teint.
Comment construisez-vous un filtre avec le générateur ?
- Ouvrez le filtrer générateur CSS. Cela commence sur Vintage.
- Choisissez un préréglage le plus proche du look souhaité ou cliquez sur Aucun pour partir d'aucun filtre.
- Faites glisser les curseurs L'aperçu se met à jour au fur et à mesure que vous vous déplacez, et la ligne CSS générée se met à jour avec.
- Cliquez sur Copier CSS pour mettre le plein
filter: ...;déclaration sur votre presse-papiers. - Collez-le sur le sélecteur de votre image ou élément, puis vérifiez-le dans la page réelle.
Seules les fonctions modifiées apparaissent dans la sortie, donc le retour de Brightness à exactement 100 % supprime brightness() de la ligne au lieu de partir brightness(100%) derrière.
Pourquoi un filtre brise-t-il les éléments fixes et absolument positionnés ?
Parce que n'importe filter autre que none fait de l'élément un bloc contenant pour ses descendants positionnés absolument et fixes, et crée un nouveau contexte d'empilement La spécification Filter Effects énonce les deux Ce n'est pas un bug du navigateur ; c'est ainsi que la propriété est définie.
En pratique, cela produit deux bugs classiques.
Un modal fixe qui n'est pas fixe. Normalement position: fixed place un élément par rapport à la fenêtre d'affichage À l'intérieur d'un ancêtre filtré, il est placé par rapport à cet ancêtre à la place :
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
Une chute cachée sous les voisins. L'élément filtré devient son propre contexte d'empilement, donc un enfant avec z-index: 1000 ne peut plus s'élever au-dessus des éléments à l'extérieur de la carte Il est seulement sur le dessus à l'intérieur de la carte.
Les correctifs sont les mêmes pour les deux Appliquer le filtre sur un élément plus étroit, tel que le img à l'intérieur de la carte plutôt que de la carte elle-même Ou rendre le modal ou le dropdown à l'extérieur de l'élément filtré, ce qui est ce que font " ; portail" ; les composants dans les frameworks UI. Le transform la propriété provoque le même comportement de bloc contenant, donc le Guide de transformation CSS est utile si vous rencontrez ce bug avec les deux propriétés en jeu.
Comment les filtres se comparent-ils au filtre de toile de fond et à l'opacité ?
Plusieurs propriétés se chevauchent avec les fonctions de filtre, et choisir la bonne évite les effets secondaires.
| Propriété | Affecte | Usage typique |
|---|---|---|
filter |
L'élément et son contenu | Effets photo, logos en niveaux de gris, flou sur une image |
backdrop-filter |
Tout ce qui se trouve derrière l'élément | Panneaux de verre givrés, superpositions floues |
opacity |
L'élément et son contenu | Éteindre un élément dans ou hors |
filter: opacity() |
L'élément et son contenu | La transparence dans le cadre d'une chaîne de filtrage |
mix-blend-mode |
Comment l'élément se mélange avec ce qu'il y a derrière | Superpositions de couleurs, effets duotone |
backdrop-filter prend les mêmes fonctions que filter(en), mais les applique au contenu derrière l'élément, c'est ainsi que les panneaux de glassmorphisme brouillent la page en dessous Le générateur de glassmorphisme construit ces déclarations.
Pour faire disparaître un élément tout seul, clair opacity est le choix plus clair. opacity() à l'intérieur d'une chaîne de filtres est utile lorsque vous écrivez déjà un filtre et que vous souhaitez de la transparence dans la même ligne.
Pouvez-vous animer des filtres CSS ?
Oui. filter est animable, et un motif courant est un logo en niveaux de gris qui se transforme en couleur en vol stationnaire :
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
Le navigateur interpole entre grayscale(100%) et none parce que none est traité comme les fonctions correspondantes à leurs valeurs d'identité L'interpolation fonctionne proprement lorsque les deux états répertorient les mêmes fonctions dans le même ordre Si les listes de début et de fin diffèrent dans l'ordre, le résultat peut sauter au lieu de s'animer en douceur, alors écrivez les deux états avec le même ordre de fonction.
Les filtres CSS nuisent-ils aux performances ?
Les filtres coûtent du temps de rendu, et le flou coûte le plus cher Les navigateurs exécutent généralement des filtres sur le GPU, ce qui rend la plupart des filtres de couleur bon marché. blur() est différent : le travail s'agrandit à la fois avec le rayon de flou et la taille de la zone, de sorte qu'un grand rayon sur un élément plein écran, en particulier celui qui anime ou se trouve derrière le contenu défilant, peut laisser tomber les images sur des appareils plus lents.
Limites pratiques:
- Gardez les rayons de flou petits sur les grands éléments et évitez d'animer le rayon lui-même.
- Flouez un élément plus petit ou une image réduite plutôt qu'un emballage pleine page.
- Pour le mouvement, animer
transformetopacity(lesquels navigateurs gèrent efficacement et maintiennent le filtre statique. - Testez sur un téléphone de milieu de gamme, pas seulement sur un ordinateur de bureau.
Questions courantes sur les effets spécifiques
Quelques effets apparaissent assez souvent pour être écrits.
Image en noir et blanc : filter: grayscale(100%); Les valeurs inférieures à 100 % laissent une certaine couleur, donc grayscale(50%) donne un regard sourd.
Image d'arrière-plan gravée derrière le texte : filter: brightness(60%); sur l'élément image Vérifiez le contraste du texte après plutôt que de deviner ; le vérificateur de contraste de couleurs donne un rapport WCAG.
Mode sombre grossier pour un document ou un diagramme intégré : filter: invert(100%) hue-rotate(180deg); Inverser retourne la lumière et l'obscurité mais tourne également les teintes vers leurs opposés ; faire tourner la teinte de 180 degrés ramène la plupart des couleurs vers leur teinte d'origine C'est une approximation, et les photos à l'intérieur auront l'air fausses, alors excluez-les.
Tonné noir et blanc : filter: grayscale(100%) sepia(60%); comme nous l’avons expliqué ci-dessus.
L'ensemble complet des constructeurs CSS, y compris l'ombre et les transformations de texte, est disponible Hub d'outils CSS.
Le générateur est-il privé ?
Oui. L'aperçu et le CSS sont générés dans votre navigateur avec JavaScript Rien n'est téléchargé, il n'y a pas d'image à télécharger en premier lieu, et l'outil continue de fonctionner hors ligne une fois la page copiée Le CSS compte vers une limite d'utilisation quotidienne et enregistre uniquement qu'une copie s'est produite.
