Un générateur de dégradés CSS 3
10 mars 2010
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 !
I love your tool! In addition to serving a static fallback PNG, here’s also a fallback implementation of CSS gradients using Canvas for browsers that don’t support it natively: http://weston.ruter.net/projects/css-gradients-via-canvas/
Super ! Manque juste un petit sélecteur de couleurs jquery et ce sera parfait
En effet, mais ça ne saurait tarder !
Merci !
c’est vraiment un moyen super de générer facilement des dégradés…
Bel outil en effet, je l’adopte !
Salut, je trouve votre tool tellement chouette que j’aimerai bien en parler dans un cours que je suis en train de rédiger pour formacd.com (je doit evidement expliquer comment marche les dégradés css et la totalité des hacks, mais j’aurai aimer conclure par un « mais quelqu’un de bien malin a pondu un générateur de dégradé qui va vous simplifier la vie ici.. link etc… »)
Est ce que vous m’y autorisez svp ?
Bonne soirée
ps : j’avoue que pour éviter de perdre du temps votre générateur est super sympa !
Avec plaisir ! Ravi que mon petit outil puisse servir…
Fantastic. Would love to see radial gradient support.
Hi !
Very nice page – i tried the generator but Opera 10.50 seems not to render the svg within my table so it falls back to bgcolor instead. Is this problem due to the loose doctype ?!
Hi,
Your CSS gradient generator with support for Opera is awesome!
Sadly, the code it generates doesn’t work in Opera 10.50, which supports background-size instead of -o-background-size. You can easily fix this by adding the following line of CSS to the generated output:
background-size: 100% 100%;
Thanks! I’m going to update the generated code.
Thanks
I see you’ve just updated the tool, replacing
-o-background-sizewithbackground-size. However, it might be a good idea to keep the vendor-prefixed property as well, to continue support for older Opera versions.Wow, my bad! Fixed now…
Bravo, très sympathique cet outil. J’en profite pour visiter le reste du site et je vous tire mon chapeau.
Can I use an image along with the gradient?
Thank you in advance,
Zirta.
Sure, use the button right below the CSS code to download it.
Fantastic. This is the most comprehensive generator I have found. Thanks!
Thanks a lot!
In Chrome 7, generating code using RGBA values with compatibility for IE has a bug where the second hex value (I only tried with 2 colors) generated for IE includes the alpha channel hex but omits the Blue hex value. For example, in the following code, the alpha is set to 50 (the initial 7f of each hex value). The startColorstr is correct, with 8 characters, but the endColorstr only has the first 6 – including the alpha channel value and omitting the blue channel:
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#7fff4040, endColorstr=#7fc000);
Bug fixed! It was related to the way javascript converts a decimal value to hex, resulting sometimes in one-char strings (whereas 2 were expected).
Thanks for reporting!
Wow, that was fast – thanks!
Merci d’exister AALÉLUIA
Très bon outil. Merci.
Un petit commentaire parallèle : à quand des css communs à tous les navigateurs. Si je dois passer 3 heures pour transformer ou créer tous mes dégradés en css tout ca pour faire un site 2.0, je vais retourner à mes bonne vieilles images Photoshop et au web (-)2.0.
D’ailleurs, on devrait changer le nom des css et désormais parler de livre de style !
Très juste en effet !
Je n’arrive pas a obtenir les images, c’est a dire que je les télécharge mais elle sont blanches, pourquoi ?
Bonjour,
Le générateur a besoin d’être mise à jour de façon à prendre en compte la syntaxe de la spécification CSS 3 pour les gradients
http://www.w3.org/TR/css3-images/#gradients
ainsi que le préfixe pour opera -o-
Merci.
En effet ! Je travaille d’ailleurs actuellement à une nouvelle version du générateur, plus simple et plus pratique, elle prendra en compte ces deux syntaxes. Merci pour l’info !
Merci pour cet outil je l’ai testé dans mon code CSS sous SAFARI ça marche impecable, je testerai sur les autres navigateurs mais c’est génial.
Je tente de comprendre le code CSS maintenant…pas facile^^.
Bonjour,
toujours pas mis à jour ?
Cordialement
Was a very cool time saver wish i had found it months ago but happy i got it now! Thank goodness for people with hobbies!
Awesome tool! Would be even awesomer if it were updated to include Opera’s support for linear gradients as well as IE10′s. In the meantime, http://www.colorzilla.com/gradient-editor/ does this!
Merci beaucoup,
j’avais un script qui ne fonctionnait que avec ff
à présent, OK pour navigateurs chrome et ie
très sympa !
Le code CSS est pas facile du tout pour mois, et votre outil marche très bien, merci!
C’est (enfin) fait ! Merci pour l’info
I (eventually) found the time to update it. Thanks!
Wah, génial comme outil, prosternations obligatoires !
Le seul truc sur lequel je ne sois pas bien sûr, c’est que la largeur à choisir n’est exprimable qu’en px et non en % (pour les png et svg je suppose ?) et ça induit un peu en erreur surtout que nous ne devons pas être tellement à avoir I.E. 6 pour tester si ça fonctionne bien ou non mis à part ça, c’est superbe.
Effectivement, c’est la valeur utilisée pour la génération des PNG, donc elle est forcément absolue. Pour tout dire, ce PNG de remplacement n’est pas absolument nécessaire, la compatibilité IE6-8 peut être obtenue en utilisant des librairies comme CSS3 Pie ou Modernizr. J’ai dans mes cartons (depuis des lustres) une version améliorée de ce générateur, mais elle est au point mort – va vraiment falloir que je m’y mette
Vraiment superbe !
Il m’as aider a corriger les bugs de non affichage des dégradés sur IE !
Merci Beaucoup !
Your CSS gradient generator is very useful for us, but could you add some ColorPickers on this page for choosing different colors?
http://www.display-inline.fr/projects/css-gradient/
Yep, already working on it!
J’adore cet outil , le code css est devenu vraiment plus facile pour mois maintenant..j’ai lu qu’il y a quelques bugs a IE, c’est pourquoi j’ai le teste sur FF.
Superbe outil, très intuitif, mais un bémol : Comme un des intervenants précédents, l’image png que j’obtiens est systématiquement blanche alors que l’image svg est ok.
Test sur Mac OS 10.6 avec Safari 5.1 et Firefox 3.6.
Extrait du code généré :
18 background-image: -webkit-gradient(
19 linear,
20 left top, left bottom,
21 from(whitesmoke),
22 to(whitesmoke),
23 color-stop(0.67, whitesmoke),
24 color-stop(0.69, black),
25 color-stop(0.7, whitesmoke),
26 color-stop(0.97, black)
27 );
En effet ! C’est un petit mystère… Je vais me pencher dessus !
Merci pour l’info !
Bonjour Seb,
Merci pour votre outille, chez moi il marche sans aucune bag même en IE!
Bien, mais dommage qu’il n’y a pas un outil graphique intégré pour choisir ses couleurs.
Can you add radial gradient support in your program?
Well, it is planned, but the syntax is quite tricky. I just need to find the time to work on it
Outil adopté, design comme je les aime en plus