CSS Básico: Aplicando Gradiente

Ontem eu postei um pouco do efeito sombreado. Hoje vou falar sobre o efeito Gradiente. Descobri que esse efeito existia com o tutorial de personalizar comentários. Resolvi aprofundar um pouco mais no assunto, para isso li um post do Mundo Blogger que vou mostrar para vocês.

O código do Gradiente

-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:

-webkit-gradient(linear, left top, right top, from(#CCCCCC), to(#000000)); /*para Safari e Chrome*/
-moz-linear-gradient(left, #CCCCCC, #000000); /*Para Firefox*/

Na primeiro código (Safari e Chrome) o destaque de vermelho mostram a cor inicial do degradê e o azul a cor final.

No segundo código (Firefox) o destaque de verde indica que o degradê deve ser horizontal, o código de roxo é a cor inicial e o de laranja a cor final.

O código para 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:

-webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#000000)); /*Safari e Chrome*/
-moz-linear-gradient(top, #CCCCCC, #000000); /*Firefox*/

No primeiro código, os trechos destacados em vermelho, fazem referência a cor inicial do degradê, já os trechos destacados em azul se referem a cor final.
No segundo código, top é o código que o degradê deve se apresentar verticalmente, iniciando no topo na cor #CCCCCC sendo finalizado na cor #000000.

O código para 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  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 */
}

Existe também alguns sites que geram código de gradiente:

♥ ♥ ♥ ♥

Esse último é para escrever em Gradiente, mas não sei se funciona em blogs.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar