PNGToCSS, créer vos dégradés de couleurs en CSS à partir d’images


Jusqu’ici, pour faire dégradés de couleurs sur les sites web, il fallait en passer par des images. Depuis l’arrivée de CSS3 et de ses nouvelles possibilités (notamment sur les codages de couleurs), il est possible de créer de jolies dégradés en pur CSS.

Cette solution très pratique permet d’alléger énormément les pages web. Mais le problème reste de réussir à réaliser le dégradé de son choix.

 
PNGToCSS est un utilitaire en ligne de commande qui est capable de lire une image et de restituer le code CSS nécessaire pour reproduire le dégradé du PNG donné.

Le code de PNGToCSS est disponible sur GitHub à l’adresse suivante : https://github.com/bluesmoon/pngtocss.git.
Une fois que vous avez le code, il faudra le compiler sur votre machine le fichier pngtocss.c (ça marche très bien avec CygWin sous Windows).

 
L’utilitaire fonctionne en ligne de commande. Il s’invoque de la manière suivante :

pngtocss uneimagepng.png

Cela vous produira un code CSS comme celui-ci :

.uneimagepng{
  background-image: -moz-linear-gradient(top, #02568a, #bcf4cc);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#02568a), to(#bcf4cc));
  background-image: -webkit-linear-gradient(top, #02568a, #bcf4cc);
  background-image: -o-linear-gradient(top, #02568a, #bcf4cc);
  background-image: linear-gradient(top, #02568a, #bcf4cc);
}

Il vous suffit de coller cela dans votre feuille de style det de créer l’élement avec la classe uneimagepng.

Un peu rebutant d’utilisation mais très pratique pour les webdesigners.

Téléchargez PNGToCSS