Background com Gradientes

Introdução

Já escrevi aqui no blog sobre CSS Gradient, que é um recurso do CSS 3 para gerar degradês a partir de especificações de estilos. Porém, o recurso também pode ser utilizado para gerar algumas texturas sofisticadas e que, em alguns casos, podem substituir imagens de fundo. Neste artigo veremos alguns exemplos e suas vantagens.

Como gerar texturas

Bom, no artigo sobre CSS Gradient, apontei os elementos necessários para gerar degradês simples, de uma cor até outra. Porém, é possível especificar o ângulo da transição do degradê e também especificar várias cores, com as respectivas posições em que deve ocorrer a transição completa. Por exemplo, podemos querer que um degradê comece com a cor branca, passe para a cor azul na posição 25% e passe para a cor amarela entre a posição 25 e 100%. Veja a especificação e o resultado:

background-image: linear-gradient(left , rgb(255,255,255) 0%, rgb(0,0,255) 25%, rgb(255,255,0) 100%);
background-image: -o-linear-gradient(left , rgb(255,255,255) 0%, rgb(0,0,255) 25%, rgb(255,255,0) 100%);
background-image: -moz-linear-gradient(left , rgb(255,255,255) 0%, rgb(0,0,255) 25%, rgb(255,255,0) 100%);
background-image: -webkit-linear-gradient(left , rgb(255,255,255) 0%, rgb(0,0,255) 25%, rgb(255,255,0) 100%);
background-image: -ms-linear-gradient(left , rgb(255,255,255) 0%, rgb(0,0,255) 25%, rgb(255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right top,	color-stop(0, rgb(255,255,255)), color-stop(0.25, rgb(0,0,255)), color-stop(1, rgb(255,255,0)));

Bom, para gerar texturas com linhas, a ideia é que se faça a mudança de uma cor para a outra exatamente no mesmo ponto, ou seja, omitindo o efeito de degradê. Veja um exemplo de uma textura listada:

background-image: linear-gradient(left , rgb(255,255,255) 0%, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -o-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -moz-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -webkit-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -ms-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(255,255,255)), color-stop(0.5, rgb(255,255,255)), color-stop(0.5, rgb(0,0,0)));

background-size: 2px 2px;

Note o "degradê": vai de 0 a 50% com cor branca e de 50 a 100% com cor preta. Além disso, note que especifiquei que o tamanho do background é de 2 por 2 pixels. Como 50% de 2 é 1, então este "degradê" gera uma linha branca e outra preta. Poderiamos também utilizar um tamanho fixo para as posições das transições ao invés de valores percentuais. Como o background padrão é repetido nos eixos x e y, o resultado é um fundo listado. Veja o mesmo exemplo, mas com o tamanho ajustado:

Você também pode abusar dos degradês com ângulos para gerar texturas com linhas na diagonal.

Vou deixar aqui alguns links onde encontrei algumas texturas sofisticadas:

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
• http://lea.verou.me/css3patterns/

Vantagens e Desvantagens

Utilizar CSS gradients para gerar texturas tem algumas vantagens como:

• Não requer requisições HTTP para solicitar imagens. Consequentemente a página é consultada e exibida mais rápido.
• As transições podem ser feitas com unidades percentuais, permitindo que o degradê seja ajustável ao tamanho do elemento.
• Fácil manutenção.
• Tamanho das especificações em CSS é bem menor que o de uma imagem.

Porém, também pode ter algumas desvantagens:

• Pode gerar efeito serrilhado em alguns casos.
• Não é simples gerar texturas sofisticadas com compatibilidade entre vários navegadores.
• Não são suportados em navegadores muito antigos.