Gradient génère des dégradés CSS

Nicolas Furno |
Gradient est un nouvel utilitaire encore en bêta qui intéressera les développeurs web qui doivent utiliser des dégradés. L'idée est de composer le dégradé en utilisant les outils natifs de Mac OS X, notamment la palette de couleurs, et d'obtenir un code CSS à intégrer dans son site Internet. Le choix des couleurs se fait depuis la palette, en tapant directement un code hexadécimal ou RGB ou encore en utilisant la loupe spécifique à Gradient.

Gradient

La version actuelle compose des dégradés à deux couleurs uniquement, mais l'éditeur indique sur son site que l'on pourra à l'avenir ajouter des couleurs. Gradient sait par contre créer des dégradés linéaires (verticaux, horizontaux et en diagonale) et radiaux avec plusieurs points d'ancrage. On peut à tout moment inverser les deux couleurs choisies et avoir un aperçu du rendu, avant de copier directement le code CSS.

Le code CSS généré s'adapte à tous les moteurs d'affichage sur le marché, de WebKit à Internet Explorer, en passant par Firefox ou Opera. On peut choisir d'inclure ou d'exclure certains moteurs dans les préférences de Gradient, ce qui permet de simplifier le code.

Gradient

Si vous devez générer des dégradés en CSS régulièrement, Gradient simplifie la tâche et s'avère efficace avec son interface bien pensée et plutôt élégante. On ne connaît pas encore sa date de sortie finale et son prix, mais la version actuelle est une bêta publique utilisable gratuitement contre la saisie d'une adresse mail sur le site officiel. De quoi tester Gradient et le comparer aux solutions équivalentes qui existent, comme le site CSS3 Gradient Generator.
Tags
avatar Didjo | 
Ou plutôt le nouveau http://www.colorzilla.com/gradient-editor/
avatar SolMJ | 
Sinon y'a Espresso 2 (cf la news dessus) qui intègre également le même type d'outil pour les dégradé.
avatar ziggyspider | 
@ SolMJ Ils l'ont bien planqué leur outil dégradé mais il est vraiment sympa !
avatar Shralldam | 
Euh, il me semble qu'IE (9 y compris) ne supporte pas la propriété gradient... À moins que j'aie loupé un épisode.
avatar Dagui | 
@[MGZ] Shralldam IE ne supporte effectivement pas la propriété gradient, il a sa propre propriété, donc il faut ajouter une ligne de code supplémentaire pour lui. Ce qui fait en gros 4 lignes de code actuellement, tant que tout n'est pas encore standardisé : navigateurs webkit, Firefox, Opéra et IE.
avatar USB09 | 
Quand il s'agit d'IE, il faut oublier toutes fioritures. Point. Sinon, il y a aussi sur iPad : CSS3machine. Qui fait cela aussi très bien et plus.
avatar Anonyme (non vérifié) | 
L'application LESS (http://lesscss.org/) permet de faire ça et encore bien plus de choses! (utiliser des variables, créer des fonctions, imbriquer des styles, minimiser les sorties CSS, etc.) Moi je n'utilise plus que ça!
avatar cazanova | 
Et un logiciel qui me permette de faire de beaux dégradés, utilisables ensuite dans CSII ? si vous connaissez, ça m'intéresse... :)))

CONNEXION UTILISATEUR