repeating-radial-gradient()

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.

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 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.

Syntaxe

/* Premier argument : la forme du gradient */
repeating-radial-gradient( circle, … )                /* Synonym of repeating-radial-gradient( circle farthest-corner, …) */
repeating-radial-gradient( ellipse, … )               /* Synonym of repeating-radial-gradient( ellipse farthest-corner, …) */
repeating-radial-gradient( <extent-keyword>, … )      /* It draws concentric circles */
repeating-radial-gradient( circle radius, … )         /* Concentrinc centered circles of the given length. It can't be in %. */
repeating-radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axis are given, horizontal, then vertical */

/* Après « at » on a la position de la forme */
repeating-radial-gradient (… at <position>, … )

/* Les arguments restants définissent les */
/* lignes de rupture. */
repeating-radial-gradient (…, <color-stop>)
repeating-radial-gradient (…, <color-stop>, <color-stop>)

Valeurs

<position>

Une position CSS (<position>) qui sera interprétée de la même façon que background-position ou transform-origin. La valeur par défaut est center.

<angle>

Un angle qui détermine la ligne de gradient qui s'étend à partir du point de départ vers cet angle. La valeur par défaut est 0deg.

<shape>

La forme du gradient employé. C'est un mot-clé parmi circle (le dégradé est circulaire avec un rayon constant) ou ellipse (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est ellipse.

<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 de 0% ou 0 représentera le centre du gradient et la valeur de 100% 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 :

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.

Les premières versions du brouillon utilisaient d'autres termes comme cover et contain, respectivement synonymes de farthest-corner et closest-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

repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
où 
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<color-stop-list> = <color-stop>{2,}
où 
<length-percentage> = <length> | <percentage>
<color-stop> = <color> <length-percentage>?
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemples

Noir et blanc

CSS

div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  text-shadow: 1px 1px 0pt black;
  color: white;
  border: 1px solid black;
  height:5.5em;
}

HTML

<div id="grad1">Noir et blanc</div>

Résultat

Utilisation de farthest-corner

CSS

div {
  display: block;
  width: 50%;
  height: 80px;
  border-radius: 10px;
  border-color: #000000;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  text-shadow: 1px 1px 0pt blue;
  color: white;
  border: 1px solid black;
  height:5.5em;
}

HTML

<div id="grad1">Farthest-corner</div>

Spécifications

Compatibilité des navigateurs

[1] Avant Firefox 36, Gecko n'appliquait pas correctement le gradient sur l'espace des couleurs et des tons de gris apparaissaient avec l'utilisation de la transparence. Depuis Firefox 42, la version préfixée des gradients peut être désactivée en passant layout.css.prefixes.gradients à false via about:config.
En plus de la version non-préfixée, Gecko 44.0 ((Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41)) a ajouté la prise en charge d'une version préfixée avec -webkit pour des raisons de compatibilité web via la préférence layout.css.prefixes.webkit qui valait false par défaut. Depuis Gecko 49.0 ((Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46)), la préférence est activée par défaut.

Voir aussi

• Utiliser les gradients CSS
• repeating-linear-gradient
• radial-gradient
• La proposition originelle de WebKit
• Les filtres de gradient sur MSDN