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.
0 comentários:
Postar um comentário
Deixe Seu Coméntario