Os degradés com repetição se realizam de maneira similar aos que vimos ao tratar dos degradês lineares normais. A diferença é que utilizaremos o nome de atributo repeating-linear-gradient e, para que se produzam as repetições teremos que utilizar paradas de cor.
A sintaxe é exatamente a mesma que já conhecemos dos degradés lineares:
repeating-linear-gradient(origem, cores)
Sendo que em origem podemos colocar, tanto a posição inicial onde começa o degradé, quanto o ângulo que deve formar o gradiente. Em seguida, as cores, como também vimos, são indicadas separadas por vírgulas. No entanto, agora, para que realize a repetição, somos obrigados a assinalar uma parada de cor.
A parada de cor pode ser feita em qualquer das cores do degradé, mas claro, teremos que nos assegurar de que a última cor tenha uma parada de cor menor que o tamanho do elemento, ou se trabalhamos com porcentagens, menor que 100%. Assim, no espaço do elemento que sobre depois da última parada de cor, começará a repetição do degradé.
Agora, vamos mostrar vários exemplos de degradés com repetição para que se possa entender perfeitamente. Se você dispuser de um navegador compatível com os degradés CSS pode ver o exemplo em funcionamento.
background: repeating-linear-gradient(#fff, #666 25%);
Este degradé começa em branco e termina em cinza. Como não se indicou nada, irá de cima para baixo, em um gradiente vertical em linha reta. Porém, o importante neste caso é que a segunda cor tem uma parada nos 25%. Isso quer dizer que se chegará ao cinza no primeiro 25% do espaço do elemento e que a partir desse ponto começará de novo o degradé. O segundo degradé ocupará outro 25% da imagem e então voltará a se repetir. Portanto, na prática veremos que este degradé de branco a cinza se repetirá 4 vezes no fundo do elemento onde o coloquemos.
.meudegradé{
background: -webkit-repeating-linear-gradient(#fff, #666 25%);
background: -moz-repeating-linear-gradient(#fff, #666 25%);
background: -o-repeating-linear-gradient(#fff, #666 25%);
background: repeating-linear-gradient(#fff, #666 25%);
}
A primeira declaração (com o prefixo -webkit-) seria para navegadores como Chrome ou Safari, a segunda, (-moz-) para Firefox, a terceira (-o-) para Opera e a última é para todos os navegadores, que começarão a entendê-la quando isto das CSS3 seja um standard.
background: repeating-linear-gradient(left, #ffc, #f96 30%, #963 40%, #630 51%);
Neste segundo exemplo temos outro degradé, desta vez com 4 cores. Como se pode ver, atribuímos várias paradas de cor, em lugar de apenas uma ao último elemento. Como a última color stop está em 51% do elemento, o degradé só se verá duas vezes.
background: repeating-linear-gradient(45deg, red, blue, red 50px);
Esta é outra declaração de estilos, com um degradé em um gradiente oblíquo. Além do mais, tem a particularidade de que vai do vermelho ao azul e depois de novo ao vermelho. Com isso conseguimos que as repetições do degradé estejam sempre suavizadas e não se note quando começa e acaba uma repetição, como acontecia nos dois exemplos anteriores. Além disso, como se pode ver, colocamos a parada de cor em 50px, o que significa que o degradé se repetirá cada 50 píxels, de modo que, o número de repetições variará dependendo do tamanho do container onde se atribua este fundo.
background: repeating-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f, #f00 100px);
Este último exemplo tem as cores do arco-íris repetidos cada 100 píxels.
Podemos ver o exemplo em um navegador acessando este link, mas se seu cliente web ainda não é compatível, você pode ver os distintos degradés realizados na seguinte imagem.
Como se pode observar, os degradés com repetição não têm nenhum mistério. Assim que , podemos passar a ver os degradés radiais.
