`Filter` - Propriété CSS

filter

Résumé des caractéristiques de la propriété `filter`

Description rapide

Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

Statut

Standard

Utilisable sur

HTML, SVG

Valeurs prédéfinies

none

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété filter passe progressivement d'une valeur à une autre.

Module W3C

Module filtres et effets

Références (W3C)

Filter Effects Module Level 1

Statut du document: WD (document de travail)

Schéma syntaxique de `filter`.

Schéma syntaxique de la propriété filter
Syntaxe détaillée

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

filter est un filtre graphique, défini par l'une des fonctions : blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(().
url est un chemin vers un fichier graphique SVG.
Plusieurs filtres peuvent être spécifiés en les séparant par un espace.

Description de la propriété `filter`.

filter applique un effet visuel à un élément, le plus souvent une image : effet de flou, changement des couleurs, changement du contraste, etc.

filter s'applique sur le visuel complet de l'élément, incluant son contenu, son arrière-plan, sa bordure et, éventuellement, ses barres de défilement s'il en existe. Cependant les différents filtres graphiques ne changent pas les dimensions de l'élément, même si le traitement conduit à dessiner quelque chose à l'extérieur de l'élément (une ombre par exemple).

Valeurs pour `filter`.

filter: none;

Valeur par défaut. Aucun traitement n'est appliqué à l'élément.

filter:none;
filter: blur(5px);

Applique un flou gaussien au visuel de l'élément. Plus le nombre indiqué est important, plus le flou sera prononcé.
Voir la fonction blur().

filter:blur(5px);
filter: brightness(50%);

Ajuste la luminosité de l'élément.
La valeur doit être supérieure à 0%. Une valeur supérieure à 100% éclaircit l'image tandis qu'une valeur entre 0 et 100% assombrit l'image.
Voir la fonction brightness().

filter:brightness(50%);
filter: contrast(50%);

Ajuste le contraste du visuel de l'élément.
Une valeur supérieure à 100% augmente le contraste ; une valeur inférieure à 100% réduit le contraste : l'image prend une teinte grisâtre.
Voir la fonction contrast().

filter:contrast(50%)
filter: drop-shadow(...);

Ajoute une ombre portée. Cet effet ne modifie pas directement le contenu de l'élément mais plutôt son bloc.
drop-shadow() accepte de 2 à 5 paramètres. Pour une description détaillée de la syntaxe, reportez-vous à la page de la fonction drop-shadow().

La propriété box-shadow produit également un résultat comparable.

filter:drop-shadow(10px 10px 5px)
filter: grayscale(100%);

Convertit le visuel de l'élément en niveau de gris (image monochrome).
La valeur est valide de 0% à 100%. Une valeur inférieure à 100% effectue une conversion partielle. Les valeurs supérieures à 100% ne sont pas autorisées ou n'ont pas plus d'effet que 100%.
Voir la fonction grayscale().

filter:grayscale(100%)
filter: hue-rotate(90deg);

Provoque une rotation des couleurs de l'élément.
La valeur est valide entre 0deg et 360deg. 0deg ne change pas l'image.
Voir la fonction hue-rotate().

filter:hue-rotate(90deg)
filter: invert(100%);

Crée un négatif du visuel de l'élément. La valeur est valide de 0% à 100%. Les valeurs inférieures à 100% produisent une conversion partielle en négatif.
Voir la fonction invert().

filter:invert(100%)
filter: opacity(50%);

Rend l'élément partiellement transparent.
La valeur est valide de 0% à 100%. 0% correspond à une image totalement transparente et 100% à une image sans transparence.
Voir la fonction opacity().
Remarque : voir aussi la propriété CSS (opacity()) qui a un effet comparable.

filter:opacity(50%)
filter: saturate(150%);

Augmente ou réduit la saturation des couleurs de l'élément.
La valeur doit être supérieure ou égale à 0%. 0% correspond à une image totalement grise, 100% à l'image originale sans changement, une valeur supérieure à 100% sursature l'image.
Voir la fonction saturate().

filter:saturate(150%)
filter: sepia(100%);

Convertit le visuel de l'élément en sépia.
La valeur est valide de 0% à 100%. Une valeur inférieure à 100% effectue une conversion partielle. Les valeurs supérieures à 100% ne sont pas autorisées ou n'ont pas plus d'effet que 100%.
Voir la fonction sepia().

filter:sepia(100%)
filter: url(...);

Applique à l'élément les transformations décrites dans un fichier SVG.
Exemple avec le filtre SVG ci-dessous.

<filter id="filter1" x="0" y="0" width="100%" height="100%" class="demo-target"> <feDiffuseLighting in="SourceGraphic" lighting-color="red"> <fePointLight x="70" y="50" z="40" /> </feDiffuseLighting> </filter>

filter:url(#filter1)
filter: sepia(50%) blur(2px);

Il est possible de définir plusieurs effets à appliquer à l'aspect visuel de l'élément : il suffit de décrire les effets souhaités en les séparant par un espace. Ils seront appliqués dans l'ordre où ils sont écrits.

filter:sepia(50%) blur(2px)

Valeurs communes :


filter: initial  (none)
filter: inherit
filter: revert
filter: revertLayer
filter: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `filter`.

Les possibilités d'animation et de créativité sont très nombreuses. Voici juste quelques exemples.

Flou

Rotation de la teinte

Effet négatif

Prise en charge de `filter` par les navigateurs.

Remarque : d'autres transformations avaient été implémentées par certains navigateurs (en particulier Internet Explorer) mais n'ont pas été normalisées : symétrie, effet halo, etc. Les traitements tels que la symétrie sont maintenant réalisés par la propriété CSS transform.

Colonne 1

Capacité à appliquer un filtre sur un élément, avec la propriété filter.

Colonne 2

Traitement de la propriété filter pour appliquer un filtre graphique.

Filtres
graphiques

Propriété
filter

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `filter`.

Module effets et filtres - Niveau 1

Concernant filter. Introduction des possibilités de filtres graphiques en CSS et définition de la propriété filter.

25 Octobre 2012
Document de travail.

Voir aussi, concernant les filtres graphiques.

Tous les textes de standardisation sont publiés par le W3C. Les filtres et effets graphiques sont décrits dans la spécification dénommée "Module filtres et effets" en français, ou "Module filtres et effets" en anglais.
Voici les termes relatifs aux filtres graphiques :

Propriétés :

backdrop-filter

Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.

color-interpolation

Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.

color-interpolation-filters

Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB

Filter

Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

flood-color

Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.

flood-opacity

Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.

lighting-color

Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()

blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.

brightness()

Ajuste la luminosité d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.

contrast()

Ajuste le contraste d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.

drop-shadow()

Définit l'ombre d'un élément : dimensions, flou, couleur, etc. C'est un filtre graphique qui s'utiilise avec la propriété filter.

grayscale()

Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.

hue-rotate()

Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).

invert()

Inverse les couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec le propriété filter.

opacity()

Détermine le degré de transparence d'un élément. C'est un filtre graphique qui s'utilise avec la propriété filter.

saturate()

Définit la saturation des couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.

sepia()

Applique un effet sépia à une image ou un élément quelconque. C'est un (filtre graphique qui s'utilise avec la propriété filter.

Filter - Propriété CSS

Résumé des caractéristiques de la propriété filter

Schéma syntaxique de filter.

Description de la propriété filter.

Valeurs pour filter.