CSS Gradient

Introdução

Acompanhando o site da especificação da futura CSS 3, achei algo bacana: CSS Gradient. Este recurso permite aplicar um degradê de uma cor para outra no fundo de um elemento. E não são degradês simples (de uma cor para outra) apenas. É possível especificar várias cores, o sentido em que caminhará o degradê, e em que pontos haverá mudança de cor, ou seja, é possível especificar várias cores e obter resultados muito bonitos.

O que já existe

A especificação ainda não está pronta, mas alguns navegadores já lançaram versões provisórias para estes recursos.

O Firefox tem uma especificação bastante próxima do que será previsto no CSS 3. A criação de gradientes é feita através de uma função chamada -moz-linear-gradient, que é aplicada junto da propriedade background. A propriedade background da CSS 2.1 especifica várias coisas (cor de fundo, imagem de fundo, posição da imagem de fundo, repetição da imagem de fundo, fixação da imagem de fundo). Na CSS3, poderá ser aplicada a função linear-gradient. Com isso será possível, inclusive, usar uma imagem e aplicar um degradê por cima dela.

Os gradientes no Firefox surgiram na versão 3.6. Para obter mais detalhes, veja a especificação do linear-gradient para Firefox. Veja um exemplo básico:

/* Cor convencional */
background: -moz-linear-gradient(top, blue, white);

/* Cor RGB */
background: -moz-linear-gradient(top, #0000FF, #FFFFFF);

/* Cor RGB e RGBA (com transparencia) */
background: -moz-linear-gradient(top, rgb(0,0,255), rgba(255,255,255,0));

---

O Opera tem a especificação bem próxima da vista no CSS 3 e no Firefox. A diferença é que a função se chama -o-linear-gradient. Porém, ele também especifica algumas funções específicas, como o -o-repeating-linear-gradient. Veja mais detalhes na especificação de linear gradient para Opera. Veja um exemplo:

background: -o-linear-gradient(top, white, blue);

---

No Google Chrome e similares (família webkit), também existe uma função, mas ela se chama -webkit-gradient. Um dos parâmetros indica que o gradiente é linear. A especificação é um pouco diferente daquela que se vê na futura CSS 3, mas tem alguns aspectos interessantes. Para ver os detalhes, acesse a especificação do gradient para Webkit. Veja um exemplo básico:

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(white));

---

Já no Internet Explorer, é utilizada uma notação um tanto quanto peculiar e que não segue alguns princípios da linguagem CSS para garantir a compatibilidade entre os diferentes navegadores. Na versão 8, por outro lado, houve alguma melhoria, especialmente pela utilização de um prefixo "-ms-" sobre a propriedade "filter" (que permite a geração de gradientes), e também a delimitação do conteúdo da propriedade por aspas, para que um parser de outro navegador possa, ao menos, detectar quando terminou o valor da propriedade. Para mais detalhes, veja a especificação da propriedade -ms-filter do IE. Veja só alguns exemplos:

/* IE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#0000ffff);

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#0000ffff)";

Note que a cor foi especificada na forma de RRGGBBAA, ou seja, com canal alpha (para transparência), diferente dos demais navegadores.

---

Utilitários

Existem alguns utilitários para geração de gradientes. Eles geram o código dinamicamente para diferentes navegadores. Veja alguns deles:

• westciv
• glrzard

Mas tenha cautela ao utilizar este recurso, pois ainda podem ocorrer várias mudanças.