1 de nov de 2012

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.




6 comentários:

  1. Eu já vi em vários blogs! ^^
    Nós tamos evoluindo bem depressa, é só descobrir coisas novas né? *--*
    O efeito gradiente é bem legal <3

    Até mais! :D

    ResponderExcluir
    Respostas
    1. Eu nunca tinha visto O.O
      Sim, cada vez melhor ^^

      Excluir
  2. Eu nunca tinha visto esse tutorial, foi bem útil (:
    Aliás, amei seu blog e já estou seguindo. Se puder me fazer uma visitinha vai ser bem-vinda. Beijão <3
    http://babadolouco.blogspot.com.br/

    ResponderExcluir
  3. Adorei aqui linda, já estou seguindo ok? passa lá no meu e me ajuda na meta? beijinhos

    japassoudotempo.blogspot.com

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!