repeating-radial-gradient()
Exemple interactif
La fonction repeating-radial-gradient()
fonctionne de façon similaire à radial-gradient
mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient (de façon analogue à repeating-linear-gradient
qui permet de répéter un dégradé linéaire (linear-gradient
).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type <color>
mais une image (type <image>
) sans dimension intrinsèque : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.
Note : En CSS, un dégradé est une image (type de données <image>
et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, repeating-radial-gradient()
ne fonctionnera pas avec background-color
ou avec les autres propriétés qui acceptent des couleurs (type de données <color>
).
Syntaxe
/* Un dégradé répété qui part du centre de son conteneur,
en commençant par du rouge, passant par du bleu puis,
finissant par du vert */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);
/* Un dégradé elliptique qui commence dans le coin supérieur gauche
en commençant rouge puis en passant au vert, cinq fois entre le
centre et le coin inférieur droit et une seule fois entre le
centre et le coin supérieur gauche */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
Valeurs
<position>
- Une position CSS (
<position>
) qui sera interprétée de la même façon quebackground-position
outransform-origin
. La valeur par défaut estcenter
. <shape>
- La forme du gradient employé. C'est un mot-clé parmi
circle
(le dégradé est circulaire avec un rayon constant) ouellipse
(la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut estellipse
. <size>
- La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).
<color-stop>
- Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur
<color>
éventuellement suivie d'une position d'arrêt (une valeur<percentage>
ou<length>
représentant l'emplacement sur la ligne du gradient). Une valeur de0%
ou0
représentera le centre du gradient et la valeur de100%
représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon. <extent-keyword>
- Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :
-
Les premières versions du brouillon utilisaient d'autres termes comme
Constante Description closest-side
La forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte. closest-corner
La forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre. farthest-side
Fonctionne de façon similaire à closest-side
mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.farthest-corner
Fonctionne de façon similaire à closest-corner
mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.cover
etcontain
, respectivement synonymes defarthest-corner
etclosest-side
. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.
Syntaxe formelle
Exemples
Dégradé noir et blanc
HTML
<div class="radial-gradient"></div>
CSS
.radial-gradient {
width: 120px;
height: 120px;
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
Résultat
Utilisation de farthest-corner
HTML
<div class="radial-gradient"></div>
CSS
.radial-gradient {
width: 120px;
height: 120px;
background: repeating-radial-gradient(ellipse farthest-corner,
red, black 5%, blue 5%, green 10%);
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Images Module Level 3 La définition de 'repeating-radial-gradient()' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser