Attribut Filter

Rôle

L’attribut filter permet d’appliquer un effet visuels sur un élément HTML. Il peut s’agit d’un effet de flou ou de saturation sur l’image

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.WebkitFilter

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

img{
  -webkit-filter : blur(10px);
  filter : blur(10px);
}

– Le code HTML

<img src="http://lorempixel.com/400/200/">

Résultat

On applique sur l’image un effet de flou avec la valeur blur()

Compatibilité

 -webkit-  35.0  -webkit-  -webkit- 

L’attribut filter n’est pas pris en charge par internet explorer

Valeurs

Les différentes valeurs de l’attribut filter sont:

Les valeurs en pourcentage (80%) peuvent aussi s’écire en mode décimal (0.8)

none

Valeur pas défaut : aucun filtre
Syntaxe :filter : none

brightness

Agit sur la luminosité : à 0% l’image est noire, 100% correpond à l’image d’origine, au dessus de 100% l’image sera plus brillante

Syntaxe :filter : brightness(200%)

contrast

Agit sur le contrate : à 0% pas de contraste – l’image est sur fond grisé, 100% correpond à l’image d’origine, au dessus de 100% le contraste est accentué (les zones foncées s’assombrissent et les zones claires s’éclarcissent)

Syntaxe :filter : contrast(300%)

blur

Créé un effet de flou : plus la valeur (en px) est importante et plus le flou sera marqué

Syntaxe :filter : blur(5px)

greyscale

Convertit l’image en niveaux de gris : entre 0%(aucune transformation) et 100% (niveau de gris complet)

Syntaxe :filter : greyscale(50%)

A voir aussi

animation transform transform-origin transform-style perspectiveperspective-origin backface-visibility transition opacity border-radiusbox-shadow text-shadow cursor