Suivre

Propriétés: gradient

Maj: septembre 2011

Les types de dégradés

Il existe 4 types de dégradés, qui sont les suivants :

linear-gradient permet de créer un dégradé linéaire.
radial-gradient permet de créer un dégradé radial.
repeating-linear-gradient permet de créer un dégradé linéaire avec répétition.
repeating-radial-gradient permet de créer un dégradé radial avec répétition.

La syntaxe du W3C

     background:linear-gradient(top,red,green);

     background:linear-gradient(top right,#000,#FFF);

L’implémentation dans les navigateurs

A l’heure actuelle, seuls Gecko (Firefox) et Webkit (Chrome et Safari) implémentent les dégradés. La syntaxe utilisée est différente. Voici un exemple pour un même dégradé :

     /* Firefox */

     background:-moz-linear-gradient(top,red,blue 50%,green); 



     /* Chrome, Safari*/

     background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(0.5,blue),to(green));

News web9 février 2011

Webkit a changé sa syntaxe pour utiliser celle préconisée par le W3C, on pourra désormais écrire :

webkit-linear-gradient(top,red,green);

webkit-radial-gradient(circle,red,green);

Tout cela sera donc beaucoup plus simple...Quoique pour le moment, cela complique encore le travail des développeurs qui devront intégrer cette syntaxe supplémentaire. Ça commence à faire beaucoup !

Sur le net :http://webkit.org/blog/1424/css3-gradients/

News web27 mars 2011

Opera 11.10 beta est disponible et apporte notamment le support des dégradés CSS3. La syntaxe officielle est préfixée de -o-

-o-linear-gradient(top,red,green);

-o-radial-gradient(circle,red,green);

Pensez à prefixMyCSS pour préfixer vos CSS en un clin d’oeil !

Sur le net :Opera 11.10 Beta

Démos

Tutoriels