repeating-linear-gradient

Résumé

La fonction CSS repeating-linear-gradient créé une <image> de dégradés qui se répètent. Cela fonctionne de manière similaire, et accèpte les mêmes arguments que les dégradés linéaires basiques, comme décris dans linear-gradient, mais les points d'arrêt des couleurs sont automatiquement répétés indéfiniment dans les deux directions, en voyant leurs positions déplacées d'une multiples de la distance entre la position du dernier des points d'arrêt et du premier point d'arrêt.

La conséquence est que la couleur de fin d'un dégradé coïncide toujours avec la couleur de début. Si les deux ne sont pas identiques, cela résultera en une transition abrupte.

Comme tous les autres dégradés, un dégradé répétitif en CSS n'est pas une <color> CSS mais une image sans dimension intrinsèques ; c'est-à-dire, qu'il n'a ni taille naturelle ni préférée. Sa taille concrète s'adapte à l'élément auquel il s'applique.

Mozilla ne supporte actuellement seulement les dégradés CSS qui sont des valeurs de la propriété background-image, ainsi que de la propriété raccourcie background. Vous spécifiez une valeur de dégradé au lieu de l'URL d'une image.

Syntaxe

Syntaxe formelle : repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                                                  \---------------------------------/ \----------------------------/
                                                    Définition de la ligne de dégradé    Liste des points d'arrêts  

                              où <side-or-corner> = [left | right] || [top | bottom]
                              et <color-stop>     = <color> [ <percentage> | <length> ]?
repeating-linear-gradient( 45deg, blue, red );           /* Un dégradé répétitif sur un axe à 45 degrés débutant bleu et finissant rouge */
repeating-linear-gradient( to left top, blue, red);      /* Un dégradé répétitif allant du coin inférieur droit àau coin supérieur gauche
                                                            débutant bleu et finissant rouge */

repeating-linear-gradient( 0deg, blue, green 40%, red ); /* Un dégradé répétitif allant du bas vers le haut, débutant bleu, 
                                                            étant vert après 40% et finissant rouge */ 

Valeurs

<side-or-corner>
Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, left ou right, le second indique le côté sur une ligne verticale, top ou bottom. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.
Les valeurs to top, to bottom, to left et to right sont respectivement traduites vers les angles 0deg, 180deg, 270deg, 90deg. Les autres sont traduites vers des angles qui permetent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.
<angle>
Un angle pour la direction du dégradé. Voir <angle>.
<color-stop>
Cette valeur est composée d'une valeur de <color>, suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une <length> mesurée le long de l'axe du dégradé).
Le rendu des points d'arrêts en CSS suit les mêmes règles que les dégradés en SVG.

Exemples

background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);

Spécifications

Spécification Statut Commentaire
CSS Image Values and Replaced Content Module Level 3
La définition de 'repeating-linear-gradient()' dans cette spécification.
Candidat au statut de recommandation  

Compatibilité des navigateurs

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base (sur background et background-image) 3.6 (1.9.2)-moz[3]
16 (16)
10.0 (534.16)-webkit [2][3] 10.0 [1] 11.10-o [3] 5.1-webkit[2][3]
Sur n'importe quelle propriété qui accepte <image> Pas de support (Oui) ? ? (Oui)
Syntaxe d'héritage pour webkit Pas de support 3-webkit [2] Pas de support Pas de support 4.0-webkit[2]
Ancienne syntaxe from (sans to) 3.6 (1.9.2)-moz [4]
Removed in 16 (16)
10.0 (534.16)-webkit [2] 10.0 11.10-o[4] 5.1-webkit[2]
Syntaxe to 10 (10)-moz[4]
16 (16)
Pas de support 10.0 11.60-o[4]
Presto 2.12 va supprimer le préfixe.
Pas de support

[1] De Internet Explorer 5.5 jusqu'à 9.0 le filtre propriétaire filter: progid:DXImageTransform.Microsoft.Gradient() filter est supporté.

[2] WebKit depuis 528 supporte la  fonction d'héritage -webkit-gradient(linear,…) function. Depuis WebKit 534.16, la syntaxe standardisée est aussi supportée. À la différence de Gecko, dans les anciennes versions de webkit il n'est pas possible de définir à la fois un ange et une position dans -webkit-linear-gradient(). Il est possible d'obtenir le même effet en décalant les points d'arrêts.

[3] Gecko, Opera & Webkit considèrent que <angle> débute à la droite au lieu d'en haut. C-à-dire qu'un angle de 0deg pointe vers la droite. Ceci est différente de la dernière spécification dans laquelle un angle de 0deg pointe vers le haut.

[4] Firefox 3.6 et Opera 11.10 ont implémentés, avec un préfixe, une syntaxe précoce dans laquelle le coin ou le côté d'origine sont indiqués sans le mot-clé to, et est en réalité considéré comme une position from. La syntaxe to a été ajoutée dans Firefox 10 et Opera 11.60 , d'abord sans retirer la syntaxe dépréciée. L'équivalence entre les deux étant triviale :

-moz-repeating-linear-gradient(to top left, blue, red);

est identique à :

-moz-repeating-linear-gradient(bottom right, blue, red);

Il est prévu que l'ancienne syntaxe, sans to, soit retirée au même moment que le préfixe.

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Sebastianz, Prinz_Rana, wizAmit, prayash, bfn, teoli, FredB
 Dernière mise à jour par : Sebastianz,