Transparência cross-browser com CSS

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.

por Maurício Samy Silva

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:

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:

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.

Interessado em Web Standards, Acessibilidade, CSS e Tableless? Visite o Site do Maujor