Banner propaganda da DevMedia - Cursos de desenvolvimento web

Transparência cross-browser com CSS

Publicado em: 28/03/2007

Introdução

Transparência é um efeito largamente empregado em documentos Web e que quando usada de maneira racional pode trazer um grande apelo visual.
Em sua forma mais comum a transparência é aplicada em imagens colocadas normalmente sobre textos ou em formas com preenchimento em cores sólidas colocadas sobre conteúdos.

Objetivo

Esta matéria tem por objetivo mostrar as técnicas CSS atualmente à disposição do desenvolvedor e destinadas a aplicar transparência em imagens e em formas com cores sólidas.
Os exemplos constantes da matéria visam unicamente a mostrar a técnica em ação, sem entrar no mérito da sua utilização ou praticidade. Cabe ao designer, conhecendo o que é possível obter-se com o seu uso, criar o ambiente e local do seu emprego, bem como avaliar sua utilidade e pertinência.
Em resumo: trata-se de mais uma ferramenta para obter um efeito com CSS, dispensando o uso de scripts.

Solução com uso de PNG transparente

PNG foi inventado pelo W3C e é livre, ou seja, trata-se de um código aberto e não proprietário e atualmente é o único formato gráfico para a Web que suporta transparência. Todos os modernos editores gráficos, tais como o PhotoShop e o Fireworks são capazes de gerar imagens PNG com o canal alpha, ou seja imagens transparentes.

Assim, este é o formato web standard para transparência. Lamentavelmente o suporte oferecido pelos navegadores atuais ainda não é completo para este formato. A primeira versão do Internet Explorer a suportar PNG transparente é o IE7. Mas, como a quantidade de usuários com IE6 ainda é muito grande nos tempos atuais, nós desenvolvedores não podemos usar PNG transparente sem lançar mão de "hacks" para servir o Internet Explorer.

Para que você veja uma PNG transparente em ação, desenvolvi uma página de demonstração de imagens PNG transparentes.

Na página que você acabou de visualizar a imagem de um carro amarelo foi posicionada sobre uma DIV contendo um texto. O IE6 e anteriores simplemente ignoram a imagem e tudo se passa como se ela não estivesse ali. Contudo se você colocar o ponteiro do mouse sobre o local onde a imagem deveria estar aparece um tool-tip com o texto contido no atributo ALT do elemento IMG.

PNG transparente para IE5.5 e IE6

Existem vários "hacks" capazes de forçar os IE5.5 e IE6 a mostrar imagens PNG transparentes. Na verdade são artíficios que simulam a transparência tal como elas são em navegadores standards e se utilizam da expressão AlphaImageLoader, inventada pela Microsoft. Trata-se de uma propriedade não standard que não passa em validação CSS e que somente os IE entendem.
A criação de um arquivo .htc e a declaração da propriedade behavior para a imagem é um destes "hacks". Não vou detalhar esta solução, mas se você estiver interessado consulte uma matéria (em inglês) sobre o assunto, contendo todos os arquivos necessários disponíveis para download e também uma demonstração da técnica.

Solução com uso de uma imagem alternativa

Esta solução consiste em servir a imagem PNG transparente para navegadores standards e alternativamente servir a mesma imagem em arquivo, normalmente GIF ou JPG, para o IE aplicando a propriedade CSS FILTER nesta imagem. A diferença é que agora não precisamos acresentar scripts ou behavior, uma vez que FILTER não será aplicado em PNG transparente.

A seguir a parte relevante do código para esta solução:

...
<img src="carro-amarelo.png" alt="" class="ca" />
<!--[if lt IE 7]>
<img src="carro-amarelo.gif" alt="" class="ca-ie" />
<![endif]-->
...
...
img.ca-ie {filter: alpha(opacity=65);}
...

Observe que as imagens foram servidas inline no código HTML (com uso da tag IMG) e eu usei comentários condicionais para servir a imagem aos IE. O não uso de comentários condicionais faria com que a imagem PNG fosse 'coberta' pela imagem GIF. A consequência disto é que em navegadores standards seria renderizada a imagem GIF sem transparência sobre a PNG e o efeito não seria visto.

Para que você veja esta solução em ação, desenvolvi uma página de demonstração com imagem alternativa para o IE.

Solução sem uso de PNG transparente

Você pode obter o efeito de transparência usando uma única imagem GIF ou JPG ou outro formato que não PNG transparente, para todos os navegadores.
Esta solução é a mais simples e usa menos código e imagens, contudo lança mão de declarações de transparência específicas para determinados navegadores (códigos proprietários e que não são validados).
A sintaxe e descrição de cada um destas declarações é conforme a seguir:

  1. opacity: 0.65 - Previsto nas CSS3 já é suportado atualmente pelo Firefox 2 e pelo Ópera 9, o valor da opacidade varia de 0 a 1;
  2. -moz-opacity: 0.65 - Declaração proprietária para servir navegadores Mozilla, o valor da opacidade varia de 0 a 1;
  3. filter: alpha(opacity=65) - Declaração proprietária para servir navegadores IE o valor da opacidade varia de 0 a 100 .

A seguir a parte relevante do código para esta solução:

...
<img src="carro-amarelo.gif" alt="" class="ca" />
...
...
img.ca {
	opacity:0.65;
	-moz-opacity: 0.65;
	filter: alpha(opacity=65);
	}
...

Para que você veja esta solução em ação, desenvolvi uma página de demonstração com uso de uma imagem e declarações proprietárias.

Conclusões

  • Muitas são as técnicas de se obter o efeito transparência com uso de CSS;
  • Atualmente, por falta de suporte dos navegadores, todas as técnicas requerem "hacks" ou artifícios adicionais para funcionar;
  • Não há uma técnica possível de ser validada quando exposta integralmente ao parser do validador do W3C;
  • Cabe unicamente a você, em função das particularidades do projeto decidir pelo uso ou não de uma destas técnicas;

Nota: É possível aplicar estas técnicas colocando as imagens como background de um elemento HTML (por exemplo: uma DIV) e não usando imagens inline no código HTML como usei nesta matéria.
A título de exercício, deixo por conta de vocês, esta opção.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo