<
Menu

Tableless



Gradientes em CSS

Já é possível criar gradientes apenas utilizando CSS3. Sem imagens e com alguma compatibilidade com a maioria dos browsers do mercado. Vale a pena experimentar.

Uma das vantagens do CSS3 é a economia de imagem. É normal utilizar imagens para tratar partes do layout que são exclusivamente visuais. Um exemplo é o uso de gradientes. Até agora a única maneira de produzir gradientes era com imagens. E dá um trabalhão caso você queira modificá-la ou caso você esteja produzindo um site baseado em themes. Com CSS3 você consegue produzir gradientes diretamente pelo código CSS. Isso dá possibilidades para manipulação via Javascript e outros frameworks. Sem contar que a manutenção é muito mais suave.

Suporte de browser

Firefox, Safari, Chrome e IE5+ suportam gradientes. O Opera irá suportar um pouco mais pra frente. Parece que essa feature já está nos planos do browser. O problema é que a sintaxe utilizada é diferente para cada um deles. O que não deixa é exatamente um problemão, contanto que o resultado visual seja parecido ou igual.

Sintaxe

O gradiente será feito no background. Você define a direção do gradiente, onde ele começará e terminará, e quais as cores que farão a transição.

/* Para Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #666, #fff) repeat-X;

/* Para WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#fff)) repeat-X;

/* Para IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#666, endColorstr=#FFFFFFFF)";

/* Para IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#666, endColorstr=#FFFFFFFF);

Estou torcendo para que os browsers resolvam logo essa questão da sintaxe.

Veja abaixo como fazemos um gradiente radial. Infelizmente não funcionará no IE.

/* Para Mozilla/Gecko (Firefox etc) */
background: -moz-radial-gradient(40% 40%, farthest-side, #666, #FFF) repeat-X;

/* Para WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(radial, 20% 20%, 20, 20% 20%, 60, from(#666), to(#FFF)) repeat-X;

Veja um exemplo.

A biblioteca de referência do Safari tem alguns exemplos muito bons sobre o assunto. Contudo, acho a sintaxe do webkit mais difícil de ser entendida. Aqui tem um simulador bacana para webkit.

Para gradientes simples e para ocasiões onde o Internet Explorer não seja requisitado, esse recurso é interessante. Se o IE for realmente uma pedra no seu caminho e você precisa fazer uma versão com imagens para ele, aconselho deixar essa técnica para lá e fazer uma versão com imagens para todos os browsers. Você vai ter o trabalho já de produzir as imagens, recortá-las e etc, não vale a pena manter dois tipos de códigos.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://about.me/diegoeis/

Mais posts do autor

Comentários (26)

  • http://www.magnumweb.com.br Fernando Marquardt

    Muito bom. Tenho só uma dúvida. Ali você menciona (como em outros sites que já vi) que o filter seria para IE 5.5-7 e o -ms-filter para o IE8, certo?

    O problema é que estou a algum tempo tentando utilizar gradient no IE e o resultado que tenho obtido é o seguinte: o filter funciona perfeitamente no IE 8, mas não funciona no IE 7 e o -ms-filter não funciona em nenhum.

  • Samuel

    Interessante, mas esse recurso tá precisando de uma padronização.

  • http://danilomatos.com.br Danilo Matos

    Diego, só pra complementar…
    Nos filters que você preencheu para funcionar em crossbrowser para os IEs, você fez uso da sintaxe ARGB (Alpha – Red, Green, Blue), você utiliza 8 caracteres para a cor.

    exemplo:
    endColorstr=#[FF] [FF] [FF] [FF]
    Preenchendo o filter dessa maneira você consegue, também, utilizar uma transparência.

    exemplo2 (com transparência):
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
    zoom: 1;

    Os dois filters acima são equivalentes ao RGBa abaixo, podendo assim além de gradiente, também aplicar uma transparência.
    background: rgba(255,0,0,0.5);

  • http://www.twitter.com/julianotheiss Juliano Theiss

    Olá Diego, mais um assunto prático muito interessante, tenho uma dúvida quanto a esses recursos do CSS3, veja se tem alguma opinião formada sobre:
    “Quanto o Flash não tinha sombra nativa, tinhamos que fazer a sombra no photoshop e importar o PNG dentro do próprio Flash para utilizar. Depois quando o flash começou a utilizar nativamente o efeito de sombra e outros filtros, notou-se uma absurda utilização da memória RAM da máquina, e que valeria mais a pena utilizar sombras da maneira antiga.”
    Agora pergunto, com SOMBRAS e GRADIENTES via CSS, corremos algum risco deste tipo quanto a memória, processamento, etc? Coisas como SVG, GRADIENTS e SOMBRAS seriam viáveis para LAYOUT, ou apenas quando há programação envolvida para alterar dinamicamente?
    Abrass

    o/

  • Pingback: Tweets that mention Criar gradientes degrade com CSS | Boas práticas de Desenvolvimento com Padrões Web -- Topsy.com

  • http://www.marcelomx.com Marcelo Rodrigues

    Diego, muito bom o seu artigo. Esses dias mesmo terminei um trabalho que precisei utilizar backgrounds com gradientes.

    Porém, para o IE, não aconselho o uso de imagens e esse foi um implicador para nós, pois queríamos deixar a página leve. Preferimos, nesse caso, utilizar um componente chamado PIE (progressive internet explorer) que só funciona no IE e habilita esses recursos de sombra, background gradiente.

    É claro que depende muito do projeto, pois usar imagens de fundo para simular um simples botão pode ser mais leve que carregar esse recurso inteiro (cerca de 10k comprimido).

    http://css3pie.com

    Fica dica ;-)

  • Anderson Brandolt

    tá aí, não sabia disso…
    Valeu pelo artigo!

    Abraço

  • http://www.tkp.com.br/ tkp.com.br

    Poxa vida essa noticia é boa mais infelizmente no ie tem que usar o filter, que acaba deixando o over had um pouco mais lento……

    Mais já é um começo….

  • Pingback: CSS3 – O que vem por aí… | Boas práticas de Desenvolvimento com Padrões Web

  • Pingback: Feliz 2011 | Tableless - Desenvolvimento com Padrões Web

  • Pingback: Portal de Notícias Design Silva

  • Pingback: CSS3 com PIE – bordas arredondadas, sombras e gradiente. | Tableless - Desenvolvimento com Padrões Web

  • Rodrigo

    Muito bom,Parabéns!

  • Tofole

    Estou usando a versão 1164  do opera e estou tendo problemas por exibição de efeito radil liner e até mesmo o exemplo acima não concegui enxergar com o opera. Testei com o FF e Crhome e funcionaram.!

  • http://www.facebook.com/Thulioph Thulio Philipe

    Não sei se já aconteceu com alguém, mas caso o degradê não funcione com o mesmo código no IE, solucionei colocando os 6 digitos representado pelas cores, não pegou só com 3 (#ccc) tive que utilizar (#cccccc).

    Valeu pelo post, show!

  • Aline Schmidt

    Pessoal, boa tarde.

    Estou com um problema de validação de CSS no site que estou trabalhando.

    Seguinte, a W3C me retornou o seguinte erro: 2433.loginbox.twocolumns .signuppanel A propriedade progid não existe : DXImageTransform

    Acontece que no CSS da página eu tenho o seguinte código: .loginbox.twocolumns.signuppanel {
    float:right;
    width:50%;
    margin-bottom:-2000px;
    padding-bottom:2000px;
    background: -webkit-gradient(linear, left top, right top, from(#f7faff), to(#d2e8ff));
    background: -moz-linear-gradient(left, #f7faff, #d2e8ff);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=’#f7faff’, EndColorStr=’#d2e8ff’);
    }

    Sendo assim, como pode não existir a propriedade progid? Como faço para corrigir essa validação? Alguém poderia me ajudar?
    Desde já agradeço :)

  • Michel Souza

    Alguém sabe como utilizar este degrade em fontes?

  • Pingback: Blog Isabel Mitchell – Gradientes em CSS

  • cjgomes

    Gostaria de saber como eu coloco em meu código para que tenha suporte aos três por exemplo, tenho uma barra com degradê em CSS, essa barra fica no topo com alguns menus.

    background: -webkit-gradient(linear, left top, left bottom, from(rgb(228, 228, 228)), to(rgb(196, 196, 196)))
     
    eu coloco os 3 códigos juntos para que atenda a todos os browsers?

  • Mateus Ávila Isidoro

    Usa os gradientes para os browsers normais, e para os browsers anormais, utilize imagens. Geralmente o único anormal é o IECA, tu usa uma daquelas tags condicionais IF IE…

  • Rafael

    Cara, já tentou colocar o gradient com letra minúscula?
    “filter:progid:DXImageTransform.Microsoft.gradient…”

  • Rafael

    Rsrs, desculpe o “cara” viu Aline!

  • Kalany Robert

    Valeu pelo post, me ajudou muito! Eu estava querendo muito saber o código e não achava… Valeu!

  • adamiran

    gostei demais

  • Natan Jesus Souza

    bom funciono em todos… meno no IE
    o IE deveria ser banido por ser tão lixo…

  • Laura

    Mtooo bom post, ajudou bastante ! :D