12 Dezembro 2017 Ter

2 visitantes e 0 Usuários online

  Indique Download Forums Links Polita de Privacidade
PC-SOS :: WEB :: Transparência cross-browser com CSS
PC-SOS
Notícias
Anúncios
Estatística
FAQ
Usuários
Usuários Online
Conteúdo
1-Política de Privacidade
Artigos
Celular
Flash
Linux
Discos Rígidos
Hardware
Internet
Modem
MSOffice
MSOffice - Excel
Multimedia
Photoshop
Programação
Rede
Segurança
Sistema Operacional
Software
Software p/ PenDrive
Termos & Siglas
WEB
Windows
Xoops
Área de Usuário

Usuário:
Senha:
Lembrar!
Esqueci minha senha
Registrar

Pesquisa Avançada

Patrocinadores

 


Teste de Velocidade

Desenvolvido por

 

 

 

2.01.2009
Como configurar o Windows para aceitar 8GB de RAM
3.12.2008
Quando Pen Drive USB Não Aparece No Windows
15.02.2008
BBS, sistema que foi o antecessor da internet
26.11.2007
Firefox 3.0
5.10.2007
Hitachi trabalha em Blu-Ray de 100GB e 200GB
24.09.2007
Novo supercomputador entra em operação no Brasil
24.09.2007
IBM oferece software gratuito de edição de texto
19.09.2007
Processador com 80 NÚCLEOS
19.09.2007
IBM terá suíte de escritório gratuita
17.09.2007
Clone do Office online, e grátis

Transparência cross-browser com CSS
21.04.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:

O Código

HTML
...
<img src="carro-amarelo.png" alt="" class="ca" />
<!--[if lt IE 7]>
<img src="carro-amarelo.gif" alt="" class="ca-ie" />

<![endif]-->
...

CSS
...
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:

O Código

HTML
...
<img src="carro-amarelo.gif" alt="" class="ca" />
...
CSS

...
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.

PC-SOS
Hits: 1100
WEB >>
 Ruim  Bom 
Comentário de Usuário: Nosso usuário podem revisar conteúdos

 

 

 

     

Número de visitas deste fev/2005 - Número de consultas ao site:

  © Copyright 2005 PC SOS. All Rights Reserved. contato@robweb.com.br