• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Com a propriedade “gradient” é possível criarmos efeitos em degradê (gradiente) sem a utilização de imagens, utilizando puro CSS3.
Este efeito só é aceito em navegadores modernos à base de -moz e -webkit, como Safari, Chrome e Firefox, em suas versões recentes.
Cabe salientar que, nem todos os navegadores suportam gradiente com CSS puro.
Para que o browser reconheça esse efeito, será necessário a utilização de filtros correspondentes “-moz” “-webkit”.
Para o funcionamento deste efeito no Internet Explorer, é preciso recorrer a um filtro, porém, só é possível especificar degradês lineares na horizontal ou vertical e somente com duas cores.

-webkit-gradient -> atributo para Chrome e Safari.
-moz-linear-gradient -> atributo para Firefox.
filter: progid:DXImageTransform.Microsoft.gradient -> atributo para o IE.

Esta propriedade pode ser aplicada no background, em qualquer elemento que você quiser atribuir um efeito degradê na cor de fundo escolhida por você. O efeito pode ser tanto na posição horizontal, quanto na posição vertical.

Para você entender o funcionamento da propriedade, vejamos o que se refere cada linha de código de acordo com o posicionamento do efeito para cada browser.

Efeito gradiente – degradê Horizontal:

 

Navegadores Safari, Chrome (-webkit)

-webkit-gradient(linear, left top, right top, from(#CCCCCC), to(#000000));

No código acima, os trechos destacados em vermelho, fazem referência a cor inicial do degradê, já os trechos destacados em azul se referem a cor final.

Navegador Firefox versões 3.6 ou superior (-moz)

-moz-linear-gradient(left, #CCCCCC, #000000);

left -> indica que o degradê deve se apresentar horizontalmente, iniciando na cor #CCCCCC sendo finalizado na cor #000000.

Navegador Internet Explorer:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCCCCC', EndColorStr='#000000');

GradientType=1 indica que o degradê deve se apresentar horizontalmente.
StartColorStr se refere à cor inicial e EndColorStr, a cor final do degradê.

Efeito gradiente – degradê Vertical:

 

Navegadores Safari, Chrome (-webkit)

-webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#000000));

No código acima, os trechos destacados em vermelho, fazem referência a cor inicial do degradê, já os trechos destacados em azul se referem a cor final.

Navegador Firefox versões 3.6 ou superior (-moz)

-moz-linear-gradient(top, #CCCCCC, #000000);

top -> indica que o degradê deve se apresentar verticalmente, iniciando no topo na cor #CCCCCC sendo finalizado na cor #000000.

Navegador Internet Explorer:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CCCCCC', EndColorStr='#000000');

GradientType=0 indica que o degradê deve se apresentar verticalmente.
StartColorStr se refere à cor inicial e EndColorStr, a cor final do degradê.

Aplicando o efeito gradiente(degradê) aos elementos no blog:

Agora que você já entendeu o funcionamento deste efeito, vejamos como aplicar os códigos a elementos que você pretende incluir efeito gradiente no backgrond.
Segue abaixo, o código completo com os atributos para cada navegador que suportam o efeito.
Para cada background que queira aplicar o efeito gradiente na HORIZONTAL, você deve incluir os seguintes atributos:

Nome do Elemento {(Pode ser #main-wrapper, .sidebar,#sidebar-wrapper, .footer, #header, #outer-wrapper, #content-wrapper, etc)
background:#CCCCCC; /* browsers sem suporte a css3 */

background: -webkit-gradient(linear, left top, right top, from(#CCCCCC), to(#000000));/* webkit browsers */

background: -moz-linear-gradient(left, #CCCCCC, #000000);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCCCCC', EndColorStr='#000000');/* IE */
}

Para cada background que queira aplicar o efeito gradiente na VERTICAL, você deve incluir os seguintes atributos:

Nome do Elemento {(Pode ser #main-wrapper, .sidebar,#sidebar-wrapper, .footer, #header, #outer-wrapper, #content-wrapper, etc)
background:#CCCCCC; /* browsers sem suporte a css3 */
background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#000000));/* webkit browsers */

background: -moz-linear-gradient(top, #CCCCCC, #000000);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CCCCCC', EndColorStr='#000000');/* IE */
}

Se quiser, confira a lista com alguns sites geradores de efeito gradiente em CSS3:

Geradores de efeito gradiente CSS3

Lembrando que, nem todos os navegadores suportam efeito gradiente com CSS3 puro.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn