Exemple
Un dégradé radial avec des arrêts de couleur espacés:
#grad {
background: -webkit-radial-gradient(red, green, blue); /*
Safari 5.1- 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera
11.6-12.0 */
background: -moz-radial-gradient(red, green, blue); /*
Firefox 3.6-15 */
background: radial-gradient(red, green, blue);
/* Standard syntax */
} Essayez - le vous - même » Définition et utilisation
Le radial-gradient() fonction crée une "image" qui représente un gradient de couleurs rayonnant à partir du centre du dégradé.
Un gradient radial est défini par son centre.
Pour créer un dégradé radial, vous devez également définir au moins deux butées de couleur.
Exemple de dégradé radial:
| Version: | CSS3 |
|---|
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la fonction.
Numbers suivis par -webkit-, -moz-, ou -O- précisent la première version qui a travaillé avec un préfixe.
| Fonction | |||||
|---|---|---|---|---|---|
| radial-gradient() | 26,0 10.0 -webkit- | 10.0 | 16,0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
Syntaxe CSS
background: radial-gradient( shape size at position, start-color, ..., last-color );
| Valeur | La description |
|---|---|
| shape | Définit la forme du gradient. Valeurs possibles:
|
| size | Définit la taille du gradient. Valeurs possibles:
|
| position | Définit la position du gradient. Par défaut est "center" |
| start-color, ..., last-color | arrêts de couleurs sont les couleurs que vous souhaitez rendre des transitions en douceur entre. Cette valeur se compose d'une valeur de couleur, suivie d'une position d'arrêt facultatif (a percentage between 0% and 100% or a length along the gradient axis) le (a percentage between 0% and 100% or a length along the gradient axis) de (a percentage between 0% and 100% or a length along the gradient axis) . |
Autres exemples
Exemple
Un dégradé radial avec des arrêts de couleurs différemment espacées:
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue
60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /*
Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue
60%);
/* Standard syntax */
} Essayez - le vous - même » Exemple
Un dégradé radial avec la forme d'un cercle:
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Essayez - le vous - même » Exemple
Un dégradé radial avec différents mots-clés de taille:
#grad1 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side,blue,green,yellow,black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%,blue,green,yellow,black);
} Essayez - le vous - même » Pages associées
CSS tutoriel: CSS3 Dégradés
Fonctions CSS Référence