Convertir une image PNG en dégradé CSS

Avant l’arrivée de CSS3, il était impossible de créer des dégradés sans avoir besoins des images, en général des png. Maintenant, on peut avoir des dégradés avec quelques lignes de code, plus petit en taille qu’une image. On va gagner le temps de création de cette image et celui du téléchargement lors de navigation.

Il existe un outil qui semble très intéressant pour les conversions des images de dégradé vers du CSS : pngtocss qui est facile à installer et à utiliser.

  1.  Téléchargement et configuration :

    Le projet est hébergé sur GitHub, pour le télécharger il y a deux méthodes : récupérer le fichier zip ou cloner le projet :


    git clone https://github.com/bluesmoon/pngtocss.git

    Dans le dossier cloné, il y a un dossier nommé src qui contient le fichier à installer « pngtocss.c ». mais avant de lancer la commande make il faut s’assurer que les bibliothèques zlib et libpng sont installées. Si vous avez ubuntu,  zlib existe dans le paquet build-essential :

    sudo aptitude install build-essential
    sudo aptitude install libpng12-0-dev

    Il ne reste maintenant qu’à installer le fichier :

    make

    Le fichier pngtocss sera ajouté au dossier courant.

  2.  Utilisation :

    Il suffit de lancer pngtocss avec le chemin vers l’image png

    Le résultat est impressionnant malgré que le projet pngtocss n’en est qu’au début et ne supporte pas encore certaines options comme les dégradés radiaux.

    Il y a une version en ligne qu’on peut trouver ici :  http://zoompf.com/grad2css.html

Publicités