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

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…

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.