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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



5 commentaires pour “Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator”

  1. [...] This post was mentioned on Twitter by bb (css4design), br1o les bons tuyaux, Franck Rouanet, Romain Parent, Vivien LECART and others. Vivien LECART said: RT @br1o: Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator http://j.mp/d5Td9V [...]

  2. A ca c’est pratique ! Merci beaucoup pour le lien !

  3. [...] Ultimate CSS Gradient Generator — Editeur de dégradés pour générer les déclarations CSS3 à travers des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Lire Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator. [...]

  4. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator [...]

  5. [...] Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator HTML/CSS CSS3 new features and techniques my presentations HTML5 HTML/XHTML [+] Articles/Education application techniques Généralités photo doctor structural IntroStuff features resources css horizontally techniques parallax HTML5 backwards compatible html5 layout articles HTML elements future resource html support Programing digital Code javascript encodage characters HTML5 developer WORK USBIO support Apps https tutorials techniques Webentwicklung create artisteer color RPG/D&D development uncertain Dev Web index référencement Articles raspberry things HTML5 & CSS3 previews transitions borders CSS outstanding techniques diagnostics web development itunes tutorials electronic HTML5/CSS3 développer application SEARCH à trier transparency CSS3 / HTML5 create stitches quality Web_Development manuel styles expressions CSS3 properties forking Frontend ressources Apprendre Langage positionnement partie xhtml HTML5 – CSS3 bakemono information samples html5 ressources tuto please formulaire apprendre CSS / HTML ultimate CSS3 flexible useful dév manuel css3 forme useful CSS tools utiliser tutorial enabling entraide javascript html centrage positionnement Web symfony comic Memodev pratiques raccourcis programation HTML- CSS slideshow jquery HTML5 and CSS3 combining HTML – Doctype ligne CSS – HTML Developpement WEB Informatique Comprendre les technologies home • contact • blog • fb • twitter to experience pearltrees activate javascript. [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site