grayscale() - Fonction CSS
Résumé des caractéristiques de la fonction grayscale()
100%
correspond à une disparition complète des couleurs (image en noir et blanc).Description de la fonction grayscale()
.
La fonction grayscale()
atténue les couleurs d'un élément, en totalité ou partiellement.
On obtient donc un élément restitué en nuances de gris, communément appelée "image en noir et blanc".
La fonction saturate()
permet d'obtenir un effet comparable, mais avec quelques différences:
- Les valeurs sont inversées :
saturate(0)
est équivalent àgrayscale(100%)
saturate()
peut agir dans les deux sens : atténuation ou renforcement des couleurs. Ce qui n'est pas le cas degrayscale()
qui ne peut que atténuer les couleurs.- Les formules de calcul utilisées par ces deux fonctions sont différentes.
La fonction grayscale() peut être utilisée avec :
backdrop-filter
: Applique un filtre graphique sur l'élément situé en arrière plan.filter
: Applique un filtre graphique (flou, contraste...) à un élément.
Syntaxe de la fonction grayscale()
.
- filter: grayscale(50%); n
n
est un nombre sans unité compris entre0
et1
, ou un pourcentage compris entre0%
et100%
. Cette valeur indique le taux de conversion en nuances de gris.
0%
ne change rien au visuel de l'élément, tandis que1
ou100%
provoque une dé-saturation totale de son image (remplacement de toutes les couleurs par des nuances de gris).
Si aucune valeur n'est indiquée dans les parenthèses,grayscale()
provoque une désaturation totale.Les valeurs négatives ne sont pas autorisées.
Exemples d'utilisation de grayscale()
.
Réagir au survol de la souris.
Au survol de la souris, les images retrouvent leurs couleurs. En fait dans notre exemple, il ne s'agit pas d'images mais de caractères
de la plage 1F300
à 1F5FF
mais le résultat serait identique avec des images.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
Tous les filtres graphiques sont bien reconnus par les navigateurs actuels. Il en est de même de la fonction grayscale()
.
grayscale()
grayscale()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que grayscale()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. grayscale()
fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.