Gradients répétitifs CSS - Astuces CSS

La répétition des gradients prennent un tour que nous pouvons déjà faire avec l'utilisation créative de color-stopsle linear-gradient()et radial-gradient()notations, et il confectionne un à nous.

L'idée est que nous pouvons créer des motifs à partir des dégradés que nous créons et leur permettre de se répéter à l'infini.

Comparaison d'un dégradé linéaire (à gauche) à un dégradé linéaire répétitif (à droite).

Il existe une astuce, avec des dégradés non répétitifs, pour créer le dégradé de telle sorte que s'il s'agissait d'un petit rectangle minuscule, il s'alignerait avec d'autres petites versions de petit rectangle de lui-même pour créer un motif répétitif. Créez donc essentiellement ce dégradé et réglez le background-sizepour créer ce petit rectangle minuscule. Cela facilitait la création de rayures, que vous pouviez ensuite faire pivoter ou autre.

Syntaxe

Il existe trois types de dégradés répétitifs, dont deux sont actuellement pris en charge dans la spécification officielle et un dans le projet de travail actuel.

La syntaxe de chaque notation est la même que celle de son type de dégradé associé. Par exemple, repeating-linear-gradient()suit la même syntaxe que linear-gradient().

Dégradé répétitif	Notation associée	Prise en charge?
`repeating-linear-gradient()`	`linear-gradient()`	Oui
`repeating-radial-gradient`	`radial-gradient()`	Oui
`repeating-conic-gradient`	`conic-gradient()`	Non

L'endroit où le dégradé se répète est déterminé par l'arrêt de couleur final . Si tel est à 20pxla taille du gradient (qui se répète ensuite) est 20pxen 20pxplace. La même chose est vraie s'il y a plusieurs couleurs enchaînées au motif. La couleur finale avec le dernier arrêt est ce qui détermine la taille et l'emplacement de la répétition.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

Voir le Pen lAkyo de Chris Coyier (@chriscoyier) sur CodePen.

Idem avec radial:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

Voir le Pen Repeating Gradients de Chris Coyier (@chriscoyier) sur CodePen.

Prise en charge du navigateur

Les dégradés répétés bénéficient actuellement d'un excellent support de navigateur. Cela dit, nous ne parlons que de dégradés linéaires et radiaux au moment de la rédaction de cet article, car les dégradés coniques sont toujours une fonctionnalité proposée dans le projet de travail de niveau 4 de la spécification. Nous espérons que nous verrons une large adoption une fois qu'il aura atteint la recommandation des candidats.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.