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

10 super mockups grátis

Um mockup é basicamente uma maquete, uma cópia do trabalho final muitas vezes em tamanho resumido para dar a ideia do real projeto. Muitos dos mockups disponibilizados na web já possuem toda estrutura necessária e permite uma economia de tempo na hora de criar obras derivadas.

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.

Adicione um botão voltar ao topo no rodapé do seu blog

Um recurso muito utilizado por designers hoje em dia, em páginas que possuem muito conteúdo, são os botões “voltar ao topo”. Seu funcionamento permite que o leitor não tenha que ir até a barra de rolagem para voltar ao inicio do blog, bastando que ele simplesmente clique no botão.Para criar este recurso, basta que você utilize uma âncora (link) para o topo do seu blog.