Blog iamvdo.meLa fonction radial-gradient permet de créer un dégradé radial. Elle prend 4 valeurs, dont 2 sont obligatoires :
- centre du dégradé (optionnel)
- taille et forme (optionnel)
- couleur de départ
- couleur de fin
Le centre du dégradé par défaut est center. La taille et forme par défaut sont ellipse closest-side.
La taille peut être exprimée classiquement, ou grâce aux mots-clés suivants par rapport au centre :
-
closest-corner: vers le coin le plus proche -
closest-side: vers le coté le plus proche -
farthest-corner: vers le coin le plus éloigné -
farthest-side: vers le coté le plus éloigné
La forme peut être circle ou ellipse
Dégradé rouge/bleu au centre de l’élément
background: radial-gradient( red, blue);Dégradé rouge/bleu à l’angle haut/gauche vers le coté opposé
/* Nouvelle syntaxe */
background: radial-gradient( farthest-side ellipse at top left, red, blue);
/* Ancienne syntaxe */
background: radial-gradient( top left, ellipse farthest-side, red, blue);Dégradation gracieuse
La syntaxe préconisée à l’heure actuelle est la suivante, sachant que le module concernant les dégradés est arrivé en CR (les préfixes devront être enlevés bientôt), et que par conséquent les navigateurs supporteront la dernière déclaration :
background: -webkit-radial-gradient( center, circle, red, blue);
background: -moz-radial-gradient( center, circle, red, blue);
background: -ms-radial-gradient( center, circle, red, blue);
background: -o-radial-gradient( center, circle, red, blue);
background: radial-gradient( circle at center, red, blue);Note : IE10, Firefox 16 et Opera 12.1 supportent les fonctions non préfixées.
Retour sur les Dégradés CSS
#1par Alexandre B, le 3 mars 2013
Attention, typo, ce n’est pas linear , mais radial :)
#2par css3create, le 8 mars 2013
@Alexandre B : corrigé, merci.
#3par Alexandre B, le 28 mars 2013
Je vois encore "linear" dans "Dégradation gracieuse".
#4par css3create, le 28 mars 2013
@Alexandre B : vraiment corrigé cette fois. o_O