CSS Dégradés Radiaux
Fonction CSS radial-gradient()
La fonction CSS radial-gradient() crée un dégradé radial.
Un dégradé radial définit une transition de couleur qui s'étend à partir d'un point central.
Un dégradé radial nécessite au moins deux arrêts de couleur. Les arrêts de couleur sont les couleurs entre lesquelles vous souhaitez obtenir des transitions douces.
Syntaxe
background-image: radial-gradient( forme taille à position, couleur-de-départ, ..., dernière-couleur ); Par défaut, forme est ellipse, taille est coin le plus éloigné, et position est centre.
Dégradé Radial - Arrêts de Couleur Équitablement Espacés (c'est par défaut)
L'exemple suivant montre un dégradé radial avec des arrêts de couleur équitablement espacés :
Exemple
#grad {
background-image: radial-gradient(red, yellow, green);
} Dégradé Radial - Arrêts de Couleur Espacés Différemment
L'exemple suivant montre un dégradé radial avec des arrêts de couleur espacés différemment :
Exemple
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
} Dégradé Radial - Définir la Forme
Le paramètre forme définit la forme du dégradé. Il peut prendre l'une des valeurs suivantes :
- ellipse (c'est par défaut)
- cercle
L'exemple suivant montre un dégradé radial avec la forme d'un cercle :
Exemple
#grad {
background-image: radial-gradient(circle, red, yellow, green);
} Dégradé Radial - Le Paramètre Taille
Le paramètre taille définit la taille de la forme de fin du dégradé. Il peut prendre l'une des valeurs suivantes :
- côté le plus proche
- côté le plus éloigné
- coin le plus proche
- coin le plus éloigné (c'est par défaut)
Exemple
Un dégradé radial avec différents mots-clés de taille :
#grad1 {
background-image: radial-gradient(closest-side at 70% 60%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 70% 60%, red, yellow, black);
} Fonction CSS repeating-radial-gradient()
La fonction CSS repeating-radial-gradient() est utilisée pour répéter des dégradés radiaux :
Exemple
Un dégradé radial répétitif :
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}