Ao longo de vários artigos vimos oferecendo explicações completas sobre os degradés em CSS 3. Agora, para finalizar esta série, vamos falar dos degradés radiais com repetição.

Como dizíamos, uma das vantagens destas novas características das CSS3 é que nos permitem realizar fundos para páginas web com degradés, porém sem ter que usar imagens. Isso faz com que economizemos tempo de desenvolvimento e desenho, ao mesmo tempo que torna mais leve o peso das páginas web. Porém, como curiosidade, no caso dos degradés radiais com repetições, haveria que acrescentar que seriam quase impossíveis de realizar usando imagens de fundo, ou pelo menos teríamos que usar arquivos gráficos muito grandes e pesados.

Os degradés radiais com repetição são quase idênticos aos degradés radiais normais, explicados no artigo anterior. De modo que tudo aquilo aprendido anteriormente, também pode ser aplicado aqui.

A sintaxe básica deste tipo de degradés é a seguinte:

repeating-radial-gradient(parâmetros)

Os parâmetros, como centro do degradé radial, a forma e o tamanho do motivo e as cores são exatamente os mesmos que para os degradés radiais, e por essa razão não vamos explicá-los. As únicas diferenças é que temos que utilizar o atributo repeating-radial-gradient. Além disso, para que se produza a repetição com o tamanho ou o intervalo que desejemos, teremos que atribuir alguma parada de cor à última das cores do degradé, que geralmente terá um valor menor de 100% do espaço do elemento.

A seguir podemos ver uma série de exemplos que ilustrarão o funcionamento dos degradés radiais com repetição. Podemos vê-los, se contamos com um navegador que suporte esta utilidade das CSS3, neste link.

background: repeating-radial-gradient(circle, #fff, #666 25%);

Este exemplo faz um degradé entre duas cores, cujo segundo elemento tem uma parada de cor em 25%. Por esse motivo, o resultado produzirá o mesmo degradé repetido 4 vezes, uma em cada 25% do espaço do elemento onde se coloque.

background: -webkit-repeating-radial-gradient(circle, #fff, #666 25%);
background: -moz-repeating-radial-gradient(circle, #fff, #666 25%);
background: repeating-radial-gradient(circle, #fff, #666 25%);

O primeiro para Chrome ou Safari, o segundo para Firefox e o terceiro é para os navegadores que no futuro suportem CSS3, pois a etiqueta definitiva começará a ser válida quando CSS3 se converta em um standard.

background: repeating-radial-gradient(left, circle, #ffc, #f96 30%, #963 40%, #630 51%);

Este degradé faz um gradiente entre várias cores e a última delas tem uma parada em 51%. Isto significa que o degradé se repetirá duas vezes.

background: repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);

Neste exemplo fazemos um degradé com forma de elipse e vai do vermelho ao azul e em seguida de novo ao vermelho. Ao começar e acabar em vermelho, conseguimos que as repetições do degradé não tenham saltos bruscos de uma cor à outra. Como se pode ver, a última cor tem uma parada de cor em 50 píxels, de modo que o degradé se repetirá de novo a cada 50 pontos na tela. O número de repetições dependerá do tamanho do elemento onde se este degradé seja colocado.

background: repeating-radial-gradient(left, ellipse farthest-side, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f, #f00);

Este outro caso produz uma repetição do degradé, mas não colocamos nenhuma parada de cor no último elemento. Isto significa que o degradé se repetirá, porém o intervalo da repetição nesta ocasião dependerá do tamanho e da forma radial que se tenha configurado. Neste caso em concreto temos uma elipse que se expande, desde a esquerda até o lado oposto, de modo que só em uma pequena porção do fundo se verá a repetição das cores.

Terminamos colocando um link para estes degradés em funcionamento. Porém, se seu navegador não mostrar nada, você pode ver seu aspecto na próxima imagem.

Conclusão dos degradés CSS3

Com este artigo finalizamos as informações sobre os degradés de CSS3, uma utilidade que sem dúvida se converterá em um hábito do web design. Até agora os degradés eram bastante utilizados, mas necessitávamos carregar a página com diversas imagens, o que requeria esforços adicionais no design original da página e também durante a manutenção.

A partir do momento que CSS 3 seja um standard para a implementação recomendada, estas características das CSS 3 serão vistas intensivamente, porque realmente oferecem muitas vantagens. No entanto, se desejarmos enfeitar nossas webs já a partir deste momento, podemos utilizar as etiquetas proprietárias de cada navegador que suporte os degradés CSS. Carregaremos apenas um pouquinho mais nosso arquivo de estilos, mas nossa página será visualmente mais atrativa