Les filtres CSS sont un outil puissant que les auteurs peuvent utiliser pour obtenir divers effets visuels (un peu comme les filtres Photoshop pour le navigateur). La filterpropriété CSS permet d'accéder à des effets tels que le flou ou le changement de couleur sur le rendu d'un élément avant l'affichage de l'élément. Les filtres sont couramment utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou d'une bordure.
La syntaxe est:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Il existe un certain nombre de fonctions à utiliser pour la valeur:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- pour appliquer des filtres SVGcustom()- "Bientôt disponible"
Plusieurs fonctions peuvent être utilisées, séparées par des espaces.
.do-more-things ( filter: blur(20px) grayscale(20%); )Fonctions de filtrage
Pour utiliser la propriété de filtre CSS, vous spécifiez une valeur pour l'une des fonctions suivantes répertoriées ci-dessus. Si la valeur n'est pas valide, la fonction renvoie «aucun». Sauf indication contraire, les fonctions qui prennent une valeur exprimée avec un signe de pourcentage (comme 34%) acceptent également la valeur exprimée en décimal (comme 0,34).
Voici une démo qui vous permet de jouer un peu avec des filtres individuels:
niveaux de gris ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Convertit l'image d'entrée en niveaux de gris. La valeur de «montant» définit la proportion de la conversion. Une valeur de 100% est entièrement en niveaux de gris. Une valeur de 0% laisse l'entrée inchangée. Les valeurs comprises entre 0% et 100% sont des multiplicateurs linéaires de l'effet. Si le paramètre «montant» est manquant, une valeur de 100% est utilisée. Les valeurs négatives ne sont pas autorisées.
sépia()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Convertit l'image d'entrée en sépia. La valeur de «montant» définit la proportion de la conversion. Une valeur de 100% est complètement sépia. Une valeur de 0 laisse l'entrée inchangée. Les valeurs comprises entre 0% et 100% sont des multiplicateurs linéaires de l'effet. Si le paramètre «montant» est manquant, une valeur de 100% est utilisée. Les valeurs négatives ne sont pas autorisées.
saturer()
filter: saturate(2); /* same as… */ filter: sature(200%);Sature l'image d'entrée. La valeur de «montant» définit la proportion de la conversion. Une valeur de 0% est complètement non saturée. Une valeur de 100% laisse l'entrée inchangée. Les autres valeurs sont des multiplicateurs linéaires de l'effet. Les valeurs supérieures à 100% sont autorisées, fournissant des résultats sursaturés. Si le paramètre «montant» est manquant, une valeur de 100% est utilisée. Les valeurs négatives ne sont pas autorisées.
rotation de la teinte ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Applique une rotation de teinte sur l'image d'entrée. La valeur de «angle» définit le nombre de degrés autour du cercle de couleur où les échantillons d'entrée seront ajustés. Une valeur de 0deg laisse l'entrée inchangée. Si le paramètre «angle» est manquant, une valeur de 0degest utilisée. La valeur maximale est 360deg.
inverser()
filter: invert(100%);Inverse les échantillons dans l'image d'entrée. La valeur de «montant» définit la proportion de la conversion. Une valeur de 100% est complètement inversée. Une valeur de 0% laisse l'entrée inchangée. Les valeurs comprises entre 0% et 100% sont des multiplicateurs linéaires de l'effet. Si le paramètre «montant» est manquant, une valeur de 100% est utilisée. Les valeurs négatives ne sont pas autorisées.
opacité()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Applique la transparence aux échantillons dans l'image d'entrée. La valeur de «montant» définit la proportion de la conversion. Une valeur de 0% est complètement transparente. Une valeur de 100% laisse l'entrée inchangée. Les valeurs comprises entre 0% et 100% sont des multiplicateurs linéaires de l'effet. Cela équivaut à multiplier les échantillons d'image d'entrée par la quantité. Si le paramètre «montant» est manquant, une valeur de 100% est utilisée. Cette fonction est similaire à la propriété d'opacité plus établie; la différence est qu'avec les filtres, certains navigateurs fournissent une accélération matérielle pour de meilleures performances. Les valeurs négatives ne sont pas autorisées.
luminosité()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Applique un multiplicateur linéaire à l'image d'entrée, la faisant apparaître plus ou moins lumineuse. Une valeur de 0% créera une image complètement noire. Une valeur de 100% laisse l'entrée inchangée. Les autres valeurs sont des multiplicateurs linéaires de l'effet. Les valeurs d'un montant supérieur à 100% sont autorisées, offrant des résultats plus brillants. Si le paramètre «montant» est manquant, une valeur de 100% est utilisée.
contraste()
filter: contrast(4); /* same as… */ filter: contrast(400%);Règle le contraste de l'entrée. Une valeur de 0% créera une image complètement noire. Une valeur de 100% laisse l'entrée inchangée. Les valeurs supérieures à 100% sont autorisées, offrant des résultats avec moins de contraste. Si le paramètre «montant» est manquant, une valeur de 100% est utilisée.
se brouiller()
filter: blur(5px); filter: blur(1rem);Applique un flou gaussien à l'image d'entrée. La valeur de «rayon» définit la valeur de l'écart type par rapport à la fonction gaussienne, ou le nombre de pixels sur l'écran qui se fondent les uns dans les autres, de sorte qu'une valeur plus élevée créera plus de flou. Si aucun paramètre n'est fourni, la valeur 0 est utilisée. Le paramètre est spécifié comme une longueur CSS, mais n'accepte pas les valeurs de pourcentage.
ombre portée ()
filter: drop-shadow((2,3) ?)Applique un effet d'ombre portée à l'image d'entrée. Une ombre portée est en fait une version floue et décalée du masque alpha de l'image d'entrée dessiné dans une couleur particulière, composée sous l'image. La fonction accepte un paramètre de type (défini dans CSS3 Backgrounds), à l'exception du fait que le mot-clé 'inset' n'est pas autorisé.
Cette fonction est similaire à la propriété box-shadow plus établie; la différence est qu'avec les filtres, certains navigateurs fournissent une accélération matérielle pour de meilleures performances.
L'ombre portée imite également naturellement le contour des objets prévus, contrairement à ce box-shadowqui ne traite que la boîte comme son chemin.
Tout comme avec text-shadow, il n'y a pas de paramètre «spread» pour créer une ombre solide plus grande que l'objet.
URL ()
filter: url()La url()fonction prend l'emplacement d'un fichier XML qui spécifie un filtre SVG et peut inclure une ancre vers un élément de filtre spécifique. Voici un tutoriel qui fonctionne comme une belle introduction aux filtres SVG avec une démo amusante.
Animation de filtres
Étant donné que les filtres sont animables, ils peuvent ouvrir les portes à tout un tas de plaisir.
Remarques
Vous pouvez combiner n'importe quel nombre de fonctions pour manipuler le rendu, mais l'ordre est toujours important (c'est-à-dire que l'utilisation de grayscale()after sepia()entraînera une sortie complètement grise).
Une valeur calculée autre que «aucun» entraîne la création d'un contexte d'empilement de la même manière que l'opacité CSS. La propriété filter n'a aucun effet sur la géométrie du modèle de boîte de l'élément cible, même si les filtres peuvent provoquer une peinture en dehors de la boîte de bordure d'un élément. Toutes les parties de l'élément cible sont affectées par les fonctions de filtrage. Cela inclut tout contenu, arrière-plan, bordures, décoration de texte, contour et mécanisme de défilement visible de l'élément auquel le filtre est appliqué, ainsi que ceux de ses descendants. Les filtres peuvent également être appliqués à du contenu en ligne, comme des étendues de texte individuelles.
La spécification introduit également une filter(image-URL, filter-functions)fonction wrapper pour une image. Cela vous permettrait de filtrer n'importe quelle image au moment où vous l'utilisez dans CSS. Par exemple, vous pouvez brouiller une image d'arrière-plan sans brouiller le texte. Cette fonction de filtrage n'est pas encore prise en charge dans les navigateurs. En attendant, vous pouvez appliquer à la fois l'arrière-plan et le filtre à un pseudo-élément pour créer un effet similaire.
Les filtres exclusifs d'IE
Également utilisé la filterpropriété, comme:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Principalement utilisé pour l'opacité lorsque vous deviez prendre en charge IE 8 et les versions antérieures.
Plus d'information
- Spécification des effets de filtre W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galerie des filtres de Bennett Feely
- Documents MDN
- Puis-je utiliser
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Comprendre les effets de filtre CSS
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 18 * | 35 | Non | 79 | 6 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0 à 6,1 * |