Gradient CSS

Publié le 30 août 2011 par Emandarine

Encore un petit outil bien pratique pour les designer web. Un générateur de code CSS pour réaliser des effets radiants sur les boutons ou sur n’importe quel objet de votre CSS.

Ultimate CSS Gradient Generator : Très efficace et complet. Il nous vient de Colorzilla et permet l’ajout de plusieurs couleurs. Il fonctionne sur tout les navigateurs. Produit de grosses lignes de code cependant.

CSS3 Gradient Generator : Très efficace également et quand même plus simple (moins complet quand même) que le précédent.

J’introduis une petite méthode pour bien comprendre pourquoi il faut faire de si longues lignes.

en gros vous devrez écrire ceci pour que votre effet soit lisible par tous les navigateurs à jour :

background: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#aaaaaa’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#aaa)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #aaa); /* for firefox 3.6+ */

CSS3 Gradient Generator