Gradiente CSS cross browser: degradês em CSS sem usar imagens
O recurso de gradiente (degradê) CSS foi introduzido pelo Webkit há cerca de 2 anos, mas raramente era utilizado devido à incompatibilidade com a maioria dos browsers. Mas agora, com o Firefox 3.6+, que suporta gradientes, é possível criar degradês sem usar imagens! E o código CSS para gradiente funciona nos principais navegadores: IE, Firefox 3.6+, Safari e Chrome.
Gradiente CSS para browsers Webkit
A seguinte linha de código é para navegadores WebKit, como Safari, Chrome, etc. Serve para exibir um gradiente linear de cima (#CCC) para baixo (#000).
background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#000));
Degradê CSS para Firefox 3.6+
Para Firefox 3.6+, usa-se -moz-linear-gradient:
background: -moz-linear-gradient(top, #CCC, #000);
CSS Gradient em Internet Explorer
No IE, é preciso recorrer a um filtro:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#000000');
Degradê com CSS em todos os navegadores (cross-browser)
background: #999; /* para browsers sem suporte a CSS 3 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* webkit browsers */ background: -moz-linear-gradient(top, #ccc, #000); /* Firefox 3.6+ */
Clique para ver o exemplo direto no navegador
<update>
Existe uma ótima ferramenta para gerar degradês com CSS: Ultimate CSS Gradient Generator.
</update>
Limitações do Internet Explorer
O filtro de gradiente do Internet Explorer não suporta color-stop, gradient angle e radial gradient. Isso significa que só é possível especificar degradês lineares na horizontal ou vertical com duas cores: StartColorStr e EndColorStr.
<update>
O leitor Renatho indicou uma maneira de trabalhar com gradientes no Internet Explorer 9.
</update>
Notas finais sobre degradês com CSS puro
É importante ter em mente que nem todos os navegadores suportam gradiente com CSS puro. Por garantia, o ideal é não depender do CSS para fazer degradês; o ideal é utilizar o recurso para melhorar o web design.
Muito boa esta "chamada" para este recurso.
Já havia testado este filtro do IE, "nas antigas". Sempre achei ele bem produtivo.
Não usava por que só funcionava nele.
Muita coisa que só o "vilão" IE tinha, há tempos, está sendo implantado agora (transitions, gradient e @font-face)
Tem uns geradores de CSS gradientes bem legais, que aceleram o processo
- para -moz- e -webkit- : http://gradients.glrzad.com/
- para o filtro do IE: http://samples.msdn.microsoft.com/workshop/sample… – tem que acessar o link com o IE, claro :-)
Você sabe de algum site onde possamos obter as três versões a partir de uma delas? Ajudaria bastante…
@ Acelio
Excelentes indicações de ferramentas! Obrigado por contribuir com o artigo!
@ Thiago Cavalcanti
Rapaz, não sei… Se descobrir, compartilha com a gente! ;-)
Solução de gradiente para IE9 http://migre.me/256ge
Maravilha, Renatho! Obrigado por contribuir para o artigo ficar melhor! ;-)
cara simplsmente vc é demais, muito bom o tutorial funciona mesmo gostei demis, poste mais tutoriais iguais a este , abraços redmaster.
Que bom que gostou! Com certeza muitos outros tutoriais do mesmo nível serão publicados, fique ligado!
Não funcionou com o meu google chrome… mas para ie e ffox ta otimo!
Pois é, como ainda não é um padrão W3C, funciona em alguns browsers e, em outros, não. Normal.
excelente, funciona no firefox, IE e Chrome. Só não funciona no Opera (para 2% dos usuários)
òtimo, valeu!!!!!!!
Amigos, uma pergunta… É possível fazer esse mesmo gradiente mas ao invés de ser linear ser em Radial? Se sim, por favor, me responda via twitter @banzaroli
abraço!
É, funcionando na grande maioria, já está bom. O jeito é esquematizar o CSS para, mesmo quando gradientes não forem exibidos, ficar bem apresentado.
Meu amigo não funciona mais no IE7, você saberia como fazer isso agora no IE7?
Obrigado
Poxa, nem acompanho as "novidades" do IE7 e não sabia que deixou de funcionar. Obrigado por avisar!
Tente procurar uma solução em javascript/jQuery. Certamente tem mais garantia de ser cross-browser.
Abraços!
No ie eu não sabia vlw pelo post
Na tag background ñ está aceitando o value: -moz-linear-gradient(top, #FFF, #CCC) url("../images/bgHeaderDown.jpg") repeat-x bottom. Quero além do background uma imagem no bottom do background. Alguém pode me ajuda?