Propriété CSS filter
La propriété filter est utilisée pour appliquer des effets visuels à un élément (image). La propriété filter possède les valeurs suivantes :
- none
- blur
- brightness
- contrast
- drop-shadow
- grayscale
- hue-rotate
- invert
- opacity
- saturate
- sepia
- url
| Valeur initiale | none |
|---|---|
| S’applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | object.style.filter = "hue-rotate(360deg)"; |
Syntaxe
Syntaxe de la propriété CSS filter
css
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Exemple de la propriété filter :
Exemple de la propriété CSS filter avec la valeur blur
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: blur(3px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple de propriété filter</h2>
<p>Pour cette image, le filtre est défini sur "blur(3px)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Résultat
Exemple d’utilisation de la propriété filter pour rendre l’image plus lumineuse :
Exemple de la propriété CSS filter avec la valeur brightness
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: brightness(150%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple de propriété filter</h2>
<p>Pour cette image, le filtre est défini sur "brightness(150%)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Dans les exemples suivants, la valeur "grayscale" rend l’image grise :
Exemple de la propriété filter avec la valeur "grayscale" :
Exemple de la propriété CSS filter avec la valeur grayscale
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(80%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple filter</h2>
<p>Pour cette image, le filtre est défini sur "grayscale(80%)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Ici, le filtre "saturate" est appliqué à l’image avec une valeur de 300 %.
Exemple de la propriété filter avec la valeur "saturate" :
Exemple de la propriété CSS filter avec la valeur saturate
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: saturate(300%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple filter</h2>
<p>Pour cette image, le filtre est défini sur "saturate(300%)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "sepia" :
Exemple de la propriété filter avec la valeur sepia
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: sepia(70%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple filter</h2>
<p>Pour cette image, le filtre est défini sur "sepia(70%)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "contrast" :
Exemple de la propriété CSS filter avec la valeur contrast
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: contrast(40%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple filter</h2>
<p>Pour cette image, le filtre est défini sur "contrast(40%)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "opacity" :
Exemple de la propriété CSS filter avec la valeur "opacity"
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: opacity(0.4);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple filter</h2>
<p>Pour cette image, le filtre est défini sur "opacity(0.4)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "invert" :
Exemple de la propriété CSS filter avec la valeur "invert"
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: invert(0.7);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple filter</h2>
<p>Pour cette image, le filtre est défini sur "invert(0.7)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "hue-rotate" :
Exemple de la propriété CSS filter avec la valeur "hue-rotate"
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: hue-rotate(90deg);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Exemple filter</h2>
<p>Pour cette image, le filtre est défini sur "hue-rotate(90deg)".</p>
<p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Valeurs
| Valeur | Description | Essayez-le |
|---|---|---|
| none | N’applique aucun effet. C’est la valeur par défaut de cette propriété. | Essayez-le » |
| blur | Applique un flou à une image. Il est spécifié par une valeur de longueur. Plus la valeur est grande, plus le flou appliqué est important. Si aucune valeur n’est appliquée, 0 est utilisé. | Essayez-le » |
| brightness | Rend l’image plus lumineuse. Si la valeur est 0, l’image sera noire. 100 % est la valeur par défaut et affiche l’image d’origine. Les valeurs supérieures à 100 % rendent l’image plus lumineuse. | Essayez-le » |
| contrast | Ajuste le contraste d’une image. Si la valeur est 0, l’image sera noire. 100 % est la valeur par défaut et affiche l’image d’origine. Les valeurs supérieures à 100 % appliquent davantage de contraste à l’image. | Essayez-le » |
| drop-shadow | Applique un effet d’ombre portée sur l’image. | Essayez-le » |
| grayscale | Convertit l’image en niveaux de gris. 0 % est la valeur de l’image d’origine. 100 % rend l’image grise. Les valeurs négatives ne sont pas autorisées. | Essayez-le » |
| hue-rotate | Applique un effet de rotation des teintes à l’image. Il est spécifié en degrés. La valeur maximale est de 360 degrés. | Essayez-le » |
| invert | Inverse les échantillons de l’image. 0 est la valeur par défaut. 100 % rend l’image totalement inversée. | Essayez-le » |
| opacity | Définit le niveau d’opacité de l’image. Cela décrit la transparence de l’image. Si la valeur est 0, l’image est complètement transparente. 100 % est l’état actuel de l’image. | Essayez-le » |
| saturate | Applique un effet de saturation à l’image. 0 % rend l’image complètement désaturée. 100 % est la valeur par défaut de l’image. Les valeurs supérieures à 100 % rendent l’image sursaturée. | Essayez-le » |
| sepia | Convertit l’image en sépia. La valeur par défaut est 0 %, 100 % rend l’image complètement sépia. | Essayez-le » |
| url | La fonction url() prend l’emplacement d’un fichier SVG qui spécifie un filtre, et peut inclure une ancre vers un élément de filtre spécifique. | |
| initial | Fait utiliser à la propriété sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |
Practice
Quels sont les différents types d’effets qui peuvent être obtenus avec la propriété CSS filter ?