Gradientes de repetição CSS - CSS-Tricks

Gradientes repetindo tomar um truque já podemos ver com o uso criativo de color-stopsno linear-gradient()e radial-gradient()anotações, e coze-lo para nós.

A ideia é que podemos criar padrões a partir dos gradientes que criamos e permitir que se repitam infinitamente.

Comparando um gradiente linear (esquerda) com um gradiente linear repetitivo (direita).

Existe um truque, com gradientes não repetitivos, para criar o gradiente de forma que se fosse um pequeno retângulo minúsculo, ele se alinhasse com outras versões de retângulo minúsculo de si mesmo para criar um padrão de repetição. Então, essencialmente crie esse gradiente e defina o background-sizepara fazer aquele pequeno retângulo minúsculo. Isso tornou mais fácil fazer listras, que você podia girar ou o que quer que fosse.

Sintaxe

Existem três tipos de gradientes de repetição, dois dos quais são atualmente suportados na especificação oficial e um que está no projeto de trabalho atual.

A sintaxe de cada notação é igual ao tipo de gradiente relacionado. Por exemplo, repeating-linear-gradient()segue a mesma sintaxe de linear-gradient().

Gradiente de repetição	Notação Relacionada	Suportado?
`repeating-linear-gradient()`	`linear-gradient()`	sim
`repeating-radial-gradient`	`radial-gradient()`	sim
`repeating-conic-gradient`	`conic-gradient()`	Não

Onde o gradiente se repete é determinado pela interrupção da cor final . Se for igual a 20px, o tamanho do gradiente (que se repete) é a 20pxpor 20pxquadrado. O mesmo é verdadeiro se houver várias cores ligadas ao padrão. A cor final com a parada final é o que determina o tamanho e a localização da repetição.

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

Veja a Pen lAkyo de Chris Coyier (@chriscoyier) no CodePen.

O mesmo com radial:

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

Veja Pen Repeating Gradients de Chris Coyier (@chriscoyier) no CodePen.

Suporte para navegador

Gradientes repetitivos atualmente desfrutam de ótimo suporte ao navegador. Dito isso, estamos falando apenas sobre gradientes lineares e radiais no momento em que este artigo foi escrito porque gradientes cônicos ainda são um recurso proposto no esboço de trabalho de Nível 4 da especificação. Esperamos que vejamos uma ampla adoção assim que atingir a recomendação do candidato.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.