Appliquer un effet de filtre en CSS
Il existe en CSS, la possibilité de mettre des effets sur un élément HTML, grace à la propriété CSS filter et sa version préfixée -webkit-filter. Il n'existe pas de version préfixée -o-filter, -moz-filter. Il existe bien une version -ms-filter pour Intrenet Explorer, mais il utilise sa propre implémentation.
Les effets de filter sont les suivant :
- - Effet de filtre Css de flou gaussien, filter:blur().
- - Effet de filtre Css de luminosité, filter:brightness().
- - Effet de filtre Css de contraste, filter:contrast().
- - Effet de filtre Css de niveaux gris, filter:grayscale().
- - Effet de filtre Css de rotation de teinte, filter:hue-rotate().
- - Effet de filtre Css d'inversion de couleur, filter:invert().
- - Effet de filtre Css d'opacité, filter:opacity().
- - Effet de filtre Css de saturation, filter:saturate().
- - Effet de filtre Css sépia, filter:sepia().
- - Effet de filtre Css d'ombre portée, filter:drop-shadow().
.cible-du-filtre-css {
-webkit-filter : blur(10px) contrast(20%); /* Chrome, Safari, Opera */
filter : blur(10px) contrast(20%);
}
Appliquer un filtre Css de flou gaussien avec blur()
En Css3, vous pouvez appliquer un effet de filtre de flou gaussien à un élément Html. Pour cela, vous devez utiliser la fonction CSS blur(rayon) de la propriété CSS filter.
La valeur de "rayon" définit la valeur de l'écart-type à la fonction gaussienne, ou le nombre de pixels (peut être une autre unité de longueur) sur le mélange de l'écran dans l'autre, donc une plus grande valeur permettra de créer plus flou. La valeur de "rayon" ne peut pas être en pourcentage (%).
Générateur de code filter:blur()
Quantité :
| Originale | Filtrée |
|---|---|
 | |
Texte filtre | Texte filtre |
Appliquer un filtre Css de luminosité avec brightness()
En Css3, vous pouvez appliquer un effet de filtre de luminosité à un élément Html. Pour cela, vous devez utiliser la fonction CSS brightness(pourcentage) de la propriété CSS filter.
Si la valeur de "pourcentage" est de 0%, dans ce cas l'élément complètement noir. Si la valeur de "pourcentage" est de 100%, alors l'effet du filtre de luminosité brightness n'est pas « appliqué ». Si les valeurs de "pourcentage" sont supérieures à 100%, l'élément est plus brillant.
Générateur de code filter:brightness()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css de contraste avec contrast()
En Css3, vous pouvez appliquer un effet de filtre de contraste à un élément Html. Pour cela, vous devez utiliser la fonction CSS contrast(valeur) de la propriété CSS filter.
Si la valeur est de 0%, alors l'image est complètement noire sous l'effet du filtre de contraste. Si la valeur est de 100% (valeur par défaut), alors l'effet du filtre de contraste contrast n'est pas « appliqué ». Au delà de 100%, les résultats sont avec plus de contraste.
Générateur de code filter:contrast()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css de niveaux de gris avec grayscale()
En Css3, vous pouvez appliquer un effet de filtre de niveaux de gris à un élément Html. Pour cela, vous devez utiliser la fonction CSS grayscale(quantité) de la propriété CSS filter.
"Quantité" définit la proportion de la conversion, ses valeurs comprises entre 0% et 100%, elles sont des multiplicateurs linéaires sur l'effet. Si "Quantité" est de 100% tout est en niveaux de gris. Si "Quantité" est de 0%, alors l'effet du filtre de niveau de gris grayscale n'est pas « appliqué ». La valeur de "Quantité" ne peut pas être négative.
Générateur de code filter:grayscale()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css de rotation de teinte avec hue-rotate()
En Css3, vous pouvez appliquer un effet de filtre de rotation de teinte à un élément Html. Pour cela, vous devez utiliser la fonction CSS hue-rotate(angle) de la propriété CSS filter.
La valeur d'"angle" définit le nombre de degrés (peut être une autre unité d'angle) autour du cercle de couleur des échantillons d'entrée qui seront ajustés. Si la valeur "angle" est de 0deg, alors l'effet du filtre de rotation de teinte hue-rotate() n'est pas « appliqué ».
Générateur de code filter:hue-rotate()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css d'inversion des couleurs avec invert()
En Css3, vous pouvez appliquer un effet de filtre d'inversion des couleurs à un élément Html. Pour cela, vous devez utiliser la fonction CSS invert(pourcentage) de la propriété CSS filter.
La valeur de «pourcentage» définit la proportion de l'inversion de couleurs. Les valeurs de «pourcentage» sont comprises entre 0% et 100%. Si la valeur de "pourcentage" est de 100%, alors la couleur est complètement inversée. Si la valeur du «pourcentage» est de 0%, alors l'effet du filtre d'inversion des couleurs invert() n'est pas « appliqué ». Les valeurs négatives ne sont pas autorisées.
Générateur de code filter:invert()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css d'opacité avec opacity()
En Css3, vous pouvez appliquer un effet de filtre d'opacité à un élément Html. Pour cela, vous devez utiliser la fonction CSS opacity(pourcentage) de la propriété CSS filter.
Les valeurs de "pourcentage" sont comprises entre 0% et 100%. Si la valeur "pourcentage" est de 0%, l'élément est totalement transparent. Si la valeur du «pourcentage» est de 100%, alors l'effet du filtre d'opacité opacity() n'est pas « appliqué ». Les valeurs négatives ne sont pas autorisées.
Cette fonction est similaire propriété CSS opacity, qui semble moins performante que le filtre opacity() qui sous certains navigateurs bénéficie d'une accélération matérielle pour une meilleure performance.
Générateur de code filter:opacity()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css de saturation des couleurs avec saturate()
En Css3, vous pouvez appliquer un effet de filtre de saturation des couleurs à un élément Html. Pour cela, vous devez utiliser la fonction CSS saturate(pourcentage) de la propriété CSS filter.
Les valeurs de "pourcentage" sont comprises entre 0% et 100%. Si la valeur de "pourcentage" est de 0%, alors l'élément est complètement non-saturé. Si la valeur de «pourcentage» est de 100%, alors l'effet du filtre de saturation de couleur, saturate() n'est pas « appliqué ». Les valeurs "pourcentage" peuvent être supérieures à 100%, dans ce cas l'élément est super-saturé. Les valeurs négatives ne sont pas autorisées.
Générateur de code filter:saturate()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css sépia avec sepia()
En Css3, vous pouvez appliquer un effet de filtre sépia à un élément Html. Pour cela, vous devez utiliser la fonction CSS sepia(pourcentage) de la propriété CSS filter.
Les valeurs de "pourcentage" sont comprises entre 0% et 100%. Si la valeur de"pourcentage" est de 100%, alors l'élément est totalement sépia sous l'effet du filtre. Si la valeur de «pourcentage» est de 0%, alors l'effet du filtre sépia, sepia() n'est pas « appliqué ». Les valeurs négatives ne sont pas autorisées.
Générateur de code filter:sepia()
Pourcentage :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Appliquer un filtre Css d'ombre Css avec drop-shadow()
En Css3, vous pouvez appliquer une ombre Css portée à un élément Html. Pour cela, vous devez utiliser la fonction CSS drop-shadow(x, y, blur, color) de la propriété CSS filter.
Cette fonction est similaire à la propriété d'ombre CSS box-shadow qui semble moins performante que le filtre drop-shadow() qui sous certains navigateurs bénéficie d'une accélération matérielle pour une meilleure performance.
Il exite cependant une petite différence de rendu dans la gestion du fond, voir ombre Css drop-shadow vs ombre Css box-shadow.
La valeur de "x" valeur positive ou négative spécifie le décalage horizontal de l'ombre Css. La valeur de "y" valeur positive ou négative spécifie le décalage vertical de l'ombre Css. La valeur de "blur" valeur positive spécifie le flou de l'ombre Css. La valeur de "couleur" spécifie la couleur de l'ombre Css.
Générateur de code filter:drop-shadow()
Décalage horizontal :
Décalage vertical :
Flou :
| Originale | Filtrée |
|---|---|
| |
Texte filtre | Texte filtre |
Compatibilité des filtres Css avec les navigateurs.
Je sépare la compatibilité de la propriété préfixée -webkit- de la propriété Css W3c. La compatibilité dépendra aussi de la compatibilité de fonction Css que l'on veut utiliser.
