Un générateur de dégradés CSS 3

64 commentaires

Par Seb

Un générateur de dégradés CSS tout-en-un

Le support pour les dégradés CSS commence tout doucement à pointer le bout de son nez, que ce soit dans Firefox (à partir de la version 3.6) ou dans Webkit (Safari 4 et Chrome 4). Et le moins que l’on puisse dire, c’est que les différentes implémentations ne nous facilitent pas vraiment la tâche…

Alors quand il s’agit d’écrire une classe CSS avec un fond dégradé, qui soit à la fois compatible avec les nouveaux navigateurs ET avec les anciens, ça relève carrément du casse-tête.

J’ai eu récemment l’occasion d’utiliser plusieurs dégradés pour un projet personnel, et j’en ai rapidement eu marre de ré-écrire à chaque fois un véritable pavé de code, de créer une image de remplacement sous Photoshop, et de tester le tout sans arrêt. J’en ai donc profité pour créer rapidement un petit outil pour générer tout ça (y compris le dégradé sous forme d’image) en quelques clics, à découvrir ici :

C’est juste un bricolage rapide, mais je me suis dit que ça pouvait servir. N’hésitez pas à laisser un commentaire si vous avez des suggestions, si vous rencontrez un problème, ou simplement si ça vous a été utile !

J’ai ajouté le support expérimental (mais fonctionnel !) des filtres de Trident (le moteur d’Internet Explorer), ainsi que des fonds SVG sous Opera. Si le support reste expérimental, c’est que leur utilisation impose l’emploi de hacks CSS, ce dont je ne suis pas vraiment fan… A utiliser avec parcimonie, mais de ce que j’en ai vu ça marche plutôt bien !


64 commentaires


Exprimez vous !


(Ne sera pas publié)

Sur ThemeForest

  • Developr - Fully Responsive Admin Skin
  • Constellation complete admin skin
  • Blue Earth Wordpress theme
  • Blue Earth