CSS3 : les filtres sur image

Il existe des propriétés CSS mal exploité comme les filtres .
Les filtres CSS permettent de donner des effets à nos images.

Malheureusement la propriété filter est mal interprété par pas mal de navigateurs (nous allons voir cela un peu plus tard).

Concernant leur utilisation, c’est assez simple. Seulement, il faut noter que la syntaxe utilisée est assez inhabituelle. Différentes valeurs prennent des paramètres et cela pour de bonnes raisons. Un petit exemple d’un filtrer avec effet de gris (grayscale) :

En premier, il y a un préfixe « webkit » puis la valeur se définira avec des parenthèses qui va contenir les pourcentages.

En premier, il y a un préfixe « webkit » puis la valeur se définira avec des parenthèses qui vont contenir les pourcentages.

Il faut savoir les filtres CSS ont des paramètres définissant la quantité des différents effets à appliquer. Dans l’exemple ci-dessus, l’image ne sera transformée qu’à 50% en noir et blanc. Pour une transformation totale, on doit d’écrire 100% au lieu de 50%.

Les différents types de filtres CSS

Les limites des filtres CSS

Eh oui, comme toute chose, les filtres CSS ont aussi leur limite. La première, comme vous l’avez forcément vu sur les exemples, il s’agit de la faible compatibilité avec les navigateurs. Ainsi, il est nécessaire de mettre des préfixes. Et étant donné le préfixe, seul les navigateurs qui sont basés sur le préfixe webkit pourront supporter la propriété.

Répondre