Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos CSS Vanessa S.

Criar Efeito Gradiente com CSS3

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.

    Sobre o autor | Website

    Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

    Desculpe, os comentários deste artigo estão encerrados.

    12 Comentários

    1. Ely disse:

      Gostei muito deste poste!!
      muito bem elaborado, não falta nada, parabéns!
      não tava conseguindo fazer o degradê no IE.
      Grato

    2. Danguilherme disse:

      Valeu, ajudou muito!

    3. Beth disse:

      Valeu pela dica do gradiente horizontal no IE. O difícil pra todo mundo é essa IEca.

    4. O Sétimo Candeeiro disse:

      mto bom cara..

      só dando um release pra galera.. se não adicionar o reset em margin:0 e padding 0 no topo ele da um contorno no ie..

      nos demais ele funfa normal..

      outro detalhe é a adição do height.. caso contrário ele adiciona listas repetidas.. mas valeu pela dica..

    5. Cris disse:

      Muito bom esse post. Me ajudou bastante hoje. Estava precisando do efeito gradiente para browsers diferentes. No opera e safari não funcionaram, mas coloquei uma cor chapada para eles. Valeu.

    6. Silvia disse:

      Oi Clau…

      Quero antes de mais nada te parabenizar pelo blog. é lindo demais, e aprendo muito aqui.
      Sobre esse efeito tem algo que gostaria e saber, tem como aplicar em algum trecho do post. Uma tópico por exemplo.
      Beijos e obrigada

    7. Kakashi disse:

      como eu faço pra colocar sombra nas letras e ficar um pouco chamuscado tb

    8. .:: Clau ::. disse:

      kaytros
      Só funciona na versão mais recente.

    9. kaytros disse:

      nao ta funcionano o do opera

    10. .:: Clau ::. disse:

      Will
      Mas nem tão dificil assim O.o

      Bruno
      Obrigada pelo aviso. Eu já providenciei a retirada dos links do ar…e já sairam! =D
      Valeu!

    11. Bruno disse:

      Clau, primeiramente parabéns pela dica, pois é muito útil. Todos os dias eu passo aqui, para ver se há alguma novidade.

      Agora um problema:

      Esse site aqui: http://lol-templates.blogspot.com/2010/09/mundo-darkness.html

      Postou, seu template para download para todos. Estou apenas lhe avisando.

      Parabéns mesmo em….=D

    12. Will disse:

      Sinceramente, acho todos estes códigos maravilhosos mas, não entram na minha cabeça. ahuahuahuahua

      Só tenho a dizer, Parabéns! 😉

    Por gentileza, se deseja alterar o arquivo do rodapé,
    entre em contato com o suporte.