Écrire un article
Tea Innovation



Promise depuis longtemps la propriété filtre de CSS 3 est enfin implémentée dans suffisamment de navigateurs pour être utilisés au quotidien (76% des navigateurs en 2015).

 

Les filtres CSS permettent notamment de désaturer dynamiquement une image d'un site web ou de flouter du texte. Ainsi, nos navigateurs se transforment peu à peu en véritable Photoshop ! Pour l'instant sans être une grande révolution fonctionnelle cette propriété permet de créer très facilement des animations sympathiques au survol des images.

 

 

Tutoriel

 

Niveau requis :
HTML niveau basique
CSS niveau moyen

 

Navigateur :
Firefox, Chrome ou Safari à jour 

 

Plutôt qu'un long discours, passez votre souris sur les fusées pour voir les filtres CSS en action :

 

L'original


 

 

filter: saturate(0);


 

 

filter: blur(5px);

 

 

 

filter: sepia(100%);


 

 

filter: hue-rotate(60deg);


 

 

filter: hue-rotate(-60deg);


 

 

filter: contrast(200%);


 

 

filter: invert(100%);


 

Le préfixe -webkit- reste obligatoire pour Chrome et Safari. Ci-dessous une démo toute simple pour tripatouiller et comprendre comment ça marche !

 

 

Télécharger la démo

 

 

Auteur : Nicolas Barré



retour au blog

Posez votre question !

Code de sécurité