Pular para o conteúdo principal

Utilizando png transparente no IE

Utilizar imagens transparentes no formato png no internet explorer é um grande problema. Suas versões antigas não dão suporte ao canal Alpha, utilizado pelo png para criar a transparência. Para nossa sorte, existem desenvolvedores que se dispõem a criar alternativas que contornem essas falhas.


É o caso do Drew Diller, desenvolvedor, que criou a excelente biblioteca chamada DD_belatedPNG.

O DD_belatedPNG é uma pequena biblioteca Java script que após inserida em seu documento, promete habilitar o canal alpha e resolver os problemas de compatibilidade com o formato png no Internet explorer.

Modo de uso

Baixe o script e hospede em seu servidor. Após hospedar o arquivo, adicione as seguintes linhas de códigos em seu documento.


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Os locais em vermelho devem ser modificados de acordo com seu documento. O primeiro é o caminho do script hospedado por você, e o segundo é o elemento, classe ou id que irá receber o arquivo png.

Exemplo


Digamos que você vai usar um png transparente no topo do meu blog. Simples, adicione a id do topo. Caso seja #topo, substitua como mostro abaixo:


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('#topo');
</script>
<![endif]-->


Caso queira declarar vários elementos, é só separá-los por virgula.


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg, #topo, h1, div');
</script>
<![endif]-->

Agora você pode usar imagens em png sem esquentar a cabeça.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

Crie um elegante menu com css e html

Neste tutorial você vai aprender como criar um elegante menu utilizando a dupla Html e Css em poucas linhas de códigos. Lembrando que o tutorial é voltado para o usuário iniciante, que está se aventurando como desenvolvedor front-end ou que desenvolve por hobbie.

Criando um rodapé com 3 colunas

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.