O degradadê de cores mais simples que podemos criar é o degradê linear. Com CSS 3 se podem especificar bastando definir uma série de parâmetros na propriedade linear-gradient, que nos permitem configurar todo o tipo de gradientes de duas ou mais cores, sem a necessidade de usar imagens.

No artigo anterior do Manual de CSS 3 fizemos uma apresentação inicial dos degradês CSS3, que nos servirá para conhecer basicamente os tipos de degradês e ver dois exemplos. Neste artigo, veremos com detalhes a construção dos degradês lineares, que resultam bastante potentes e atrativos para decorar qualquer dos elementos de um website.

Veremos, além disso, diversos exemplos que certamente esclarecerão as distintas possibilidades de construção de degradês, pois, embora não seja difícil consegui-los, existem muitas variáveis que nos podem ajudar a criar infinitos tipos de degradês com apenas a definição de um atributo de estilos CSS.

Sintaxe de criação de degradês lineares

Portanto, depois de haver lido a introdução aos degradés CSS3, vejamos em linhas gerais qual seria a sintaxe para a construção de um degradê linear.

background: linear-gradient(parametros);

Ou então:

background-image: linear-gradient(parametros);

Como vemos, para atribuir um degradê a um elemento, temos que utilizar a propriedade linear-gradient sobre um atributo background, ou background-image. Todos os elementos que suportam imagens de fundo também permitem colocar degradês de fundo. Além disso, teremos que indicar uma serie de parâmetros variáveis para a criação do degradê, que são os que realmente apresentam alguma dificuldade para entender. Estes parâmetros são os seguintes:

A) Origem-e/ou-ângulo do degradê:
O primeiro parâmetro seria a origem onde começará o degradê e/ou o ângulo de disposição do gradiente de cor. Podemos dizer que o degradado comece de cima, debaixo ou de um canto qualquer. Por padrão, os degradês serão distribuídos em um gradiente em linha reta, além de podermos indicar um ângulo diferente com o que se vá produzindo o gradiente de cor.

B) lista-de-cores e opcionalmente, o lugar até onde se deve mostrar cada um:
Em seguida colocaremos as cores, todas que quisermos, que devem ser utilizadas no degradê, separadas por vírgulas. Além disso, se desejarmos, podemos definir as paradas de cor "color stops", que consiste em declarar o lugar onde deve começar o gradiente da cor.

Para poder entender melhor tudo isto, o mais fácil é ver uma serie de exemplos. Todos eles podem ser visualizados em uma página à parte.

background: linear-gradient(orange, pink);

Isto faz um degradê da cor laranja até a rosa. Todos os demais parâmetros ficariam com seus valores predeterminados e o resultado seria que o degradê se realiza em toda a altura do elemento, de cima a abaixo, em um gradiente vertical, começando o laranja na parte de cima e acabando em rosa na parte de baixo.

background: linear-gradient(top left, #fff, #f66);

Este degradê começa no canto superior esquerdo e se cria um gradiente que vai em direção ao canto oposto. Portanto, o degradê formará um gradiente obliquo, em diagonal desde o canto superior esquerdo, onde estaria em branco (#fff), até o canto inferior direito, onde estaria o rosa (#f66).

background: -webkit-linear-gradient(180deg, #f0f, #f66);

Este degradê define sua direção por meio de um ângulo expresso em graus. 0 graus faria com que o degradê começasse na parte esquerda e 180deg indica que o degradê começaria exatamente pelo lado contrário, ou seja, pela direita. De modo que na parte da direita teríamos a cor violeta e na esquerda teríamos o rosado.

background: linear-gradient(#00f 50%, #000);

Este degradê tem o que se chama um "color stop" ou seja, uma parada de cor, que está designada com 50% na primeira cor. Isto significa que a primeira cor estaria homogênea (sem degradê) até 50% do tamanho do elemento e que depois começaria a se degradar até a segunda cor.

background: linear-gradient(45deg, #66f, #f80, #ffc);

Este degradê tem uma disposição em diagonal, pelos 45 graus que foram definidos. Além do que, podemos ver que definimos mais de duas cores no degradê. Podemos colocar tantas quanto quisermos, separadas por vírgulas. Como não há "color stops", as três cores se distribuem de maneira equitativa, desde o canto inferior esquerdo até o superior direito.

background: linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);

Este degradê também se faz em diagonal, desde o canto inferior esquerdo, igual que o anterior porém, definimos uma serie de paradas de cor (color stops), o que faz com o que a distribuição do gradiente não seja homogênea. A primeira cor começaria a se degradar para a segunda quando se chega a 10% do tamanho do elemento. O degradê para a segunda cor se completaria ao chegar a 30% e a partir desse ponto começaria a se degradar para a terceira cor. O degradê entre a segunda e terceira cor se realizaria de 30% a 60% do tamanho do elemento e se completaria quando estamos no 60%. A partir desse último color stop (60%) teríamos a última cor de maneira homogênea até o 100% do tamanho. Portanto, veremos que a cor predominante é a terceira, que tem 40% (100% do elemento - 60% do espaço onde veremos degradês) do espaço para se mostrar com seu RGB tal qual foi definido.

background: linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);

Este degradê é o mesmo que o anterior, mas com paradas de cor distintas. Além disso, estamos definindo esses "color stops" com medidas em píxels em lugar de porcentagens.

background: linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);

Este degradê, que começa na esquerda e com um gradiente reto em direção à direita, tem várias cores, as do arco- íris.

Será muito útil ver estes degradês em funcionamento em uma página à parte. Os veremos bem sempre que dispusermos de um navegador compatível com esta nova característica das CSS3. Para quem não disponha do navegador adequado, pode ver a mostra na seguinte imagem:

Paradas de cor

Como vimos, as paradas de cor, ou "color stops" permitem alterar bastante os degradês inclusive trabalhando com as mesmas cores. Para defini-las deve-se ter em conta a linha imaginária de distribuição do gradiente de cor. No princípio dessa linha teríamos a distância 0% e ao final do elemento teríamos a distância 100%. A cor inicial sempre começaria no espaço de 0% e se completaria o degradê chegando à cor final no espaço de 100%.

Embora o degradê comece de 0% a 100%, podemos colocar as paradas de cor em qualquer ponto, inclusive pontos que estejam fora desse intervalo. Por exemplo, nada nos impede de colocar uma parada de cor em 120%, o que significaria que a cor atribuída a essa parada não chegaria a se ver degradada completamente no espaço do elemento. Ou seja, se a parada de cor está fora do intervalo, não chegaremos a ver o RGB exato a que tenderia o degradê, porque está fora do espaço do elemento.

No próximo artigo comentaremos os degradês lineares com repetição.