Incroyable effet noir et blanc/couleur en CSS3

Rédigé par Daniel - 02 avril 2012

Comment passer une photo en noir et blanc sans Javascript et faire un étonnant effet en CSS3?

Le but du jeu est cette fois-ci de passer une image couleur en désaturée pour qu'au passage de la souris elle devienne en couleur.

J'ai cherché un peu dans les entrailles du web, au fin fond de sites anglosaxons et je n'ai trouvé que des exemples en Javascript avec Jquery...
Il y a bien une propriété en brouillon CSS qui devrait marcher un jour sur certains navigateurs: -webkit-filter: grayscale(1);
Chez moi elle ne fonctionne pas sous Chrome ni Safari...
J'ai trouvé en revanche une astuce qui roxe sur Firefox: la propriété Filter.

Pour pouvoir en profiter il faut mettre dans le dossier de votre site un fichier filters.svg

Ensuite insérer ce code dans le CSS:

li img{ filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */ }

Il reste à retrouver la couleur au survol:

li img:hover{ filter: none; opacity: 1; }

J'ai joué aussi sur l'opacité des images afin que les autres navigateurs ne soient pas lésés et aient une petite animation

Vous pouvez tester tout ceci ci-dessous et obtenir le code en faisant clic droit afficher la source et cliquer sur le lien du style.css pour avoir le fichier de style.

enjoy!

Développement - Mots clés : CSS3

• Alan

  jeudi 12 juillet 2012 à 11:05

  Hello :)
  
  Cette technique est un véritable gain de temps! Je suis tombé sur ton blog suite à un petit problème rencontré sur Chrome.
  C'est tout bête, mais pour redonner la couleur à l'image, ne pas oublier d'appliquer en plus de filter:none, les propriétés propriétaires ! -webkit-filter : none notamment ;).

Les commentaires sont fermés.