Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator est un éditeur de dégradés mis au point par Alex Sirota (ColorZilla) qui permet de générer les déclarations pour vos dégradés CSS3 via des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Quelques réglages préétablis sont disponibles mais la création d’un dégradé personnalisé est très intuitive. La fenêtre de prévisualisation permet de modifier l’orientation verticale ou horizontale du dégradé, et le code CSS est mis à jour automatiquement à chaque modification avec une petite pensée pour Internet Explorer.

Ultimate CSS Gradient Generator, un éditeur de dégradés à la manière de Photoshop proposé par ColorZilla

Les CSS  avec l’exemple ci-dessus :


background: #f8ffe8; /* old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 50%, #b7df2d 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(50%,#e3f5ab), color-stop(100%,#b7df2d)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* ie */

Lire la documentation sur les dégradés dans FirefoxSafari & Chrome (Webkit) et Internet Explorer pour en savoir plus.