Loading ...-
PNG Transparente no Internet Explorer 6 e 5 (solução definitiva)
Posted on janeiro 20th, 2009 14 commentsBom, acho que hoje é o dia mais feliz desse ano pra mim e creio que sera para muitos de vocês também, fiquei tão feliz em encontrar isso que quis compartilhar com vocês!
Recentemente aqui na agencia, me apresentaram uns layouts bem complicados de se montar, envolvendo transparencias que só eram possiveis com PNG transparente.
Imagine ter que criar um layout onde o background é uma mistura de degrade com textura e o conteúdo possui uma dropshadow em degrade e transparente (isso mesmo a sombra é um degrade com transparencia), são varios pesadelos juntos. Ai tive que correr atrás!!
Tem a solução tradicional que muitos devem conhecer:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagem.png');
Mas esta tem várias complicações de implementação.
Tinhamos a solução do iepngfix do site:
http://www.twinhelix.com/css/iepngfix/E a solução que veio para criar um marco na história do webdesign:
DD_belatedPNG (a solução definitiva)
Essa é uma biblioteca javascript desenvolvida por Drew Diller no site:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
Download da biblioteca ->http://www.dillerdesign.com/experiment/DD_…edPNG_0.0.7a.js
Um pequeno script que nos da o poder de usar livremente imagens PNG tanto no IE6 como no IE5, seja a imagem simplesmente inserida no documento ou como background de um elemento.
E o melhor de tudo é que tem suporte para background-repeat e background-position.
O uso é bem simples como mostro abaixo:
basta colocar o nome do seletor css onde esta declarado o background png ou a tag img na função
<script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script> <!--[if lte IE 6]> <script type="text/javascript"> DD_belatedPNG.fix('#div1'); </script> <![endif]-->ou
<!--[if lte IE 6]> <script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script> <script type="text/javascript"> DD_belatedPNG.fix('img'); </script> <![endif]-->e ainda podemos juntar tudo:
<!--[if lte IE 6]> <script src="DD_belatedPNG_0.0.7a.js" type="text/javascript"></script> <script type="text/javascript"> DD_belatedPNG.fix('#div1, #div2, img'); </script> <![endif]-->nota: “lte” no comentário condicional para versões menores ou iguais a versão 6 do IE
Segue abaixo o link do demo que fiz, onde coloquei uma imagem com sombra transparente como background de algumas divs e por ultimo a propria imagem no documento:
Link DEMO
Preview no IE5:
Posts relacionados
(6 votes, average: 5,00 out of 5)
Loading ...14 Responses to “PNG Transparente no Internet Explorer 6 e 5 (solução definitiva)”
-
alessandro fevereiro 28th, 2009 at 22:19
muito bom
vai economizar muito serviço
hehehe
vlw ae -
realmente!
é uma solução bem simples de se implementar.
-
muito bom, o meu ta repetindo o background na vertical e eu ja deixei como background: no-repeat;
aconteceu com alguem? ou alguem tem alguma solução .obrigado.
-
Olá Paulo!
Se puder mostrar um link do seu código terei o prazer em ajudar!
Eu já utilizei esse script de diversas maneiras e nunca tive problemas!
-
Obrigado pela atenção, descobri oque era, eu tinha setado background-position como center left, ai deu conflito com o java.
Obrigado pela atenção.
-
Testando.
-
Eu não sou de comentar em foruns! mais esse não pude deixar de comentar, a solução realmente é definitiva!
Parabens para o desenvolvedor dessa biblioteca!
E Parabens com obrigado para quem postou o conteúdo neste forum, foi muito útil mesmo. -
vanessa junho 23rd, 2009 at 17:23
Eu n cosegui, alguem pode me ajudar; o arquivo baixado deve ficar junto cm o html?
desde ja obrigada…
-
Olá Vanessa!
De que maneira você fez?
Deu uma olhada no link demo que coloquei no post?
-
vanessa junho 24th, 2009 at 9:30
Eu coloquei o codigo dentro do head e a outra parte que baixei, eu coloquei dentro da mesma pasta que estão os arquivos html…
-
vanessa junho 24th, 2009 at 10:09
Me add no msn por favor…
mto obrigada…
-
Obrigada, Carlos!
Ótima solução! -
olá!
me parece ser uma otima solucao,
mas quando implementei, o IE6 fica exibindo
aquele alerta de popup sabe…pedindo confirmacao antes de exibir corretamente..
alguem sabe como resolver isto?
meu fonte ficou exatamente igual ao seu no exemplo.Abracos!
-
Muito massa, vlw
Leave a Reply
Strict Web Standards
(X)HTML, CSS, JavaScript, AJax & PHP
Sobre Mim
Olá, meu nome é Carlos Roberto tenho 23 anos e trabalho com desenvolvimento web a mais de um ano participando ativamente na criação de sites webstandards. Atualmente trabalho em uma agência de publicidade e propaganda na cidade de Ribeirão Preto, a Atual Interativa (Atual/CD) na qual atuo como Webdesigner.
Neste blog pretendo colocar dicas e textos das áreas de Web Standards e ajudar a difundir o conceito na comunidade brasileira de desenvolvedores.
Boa leitura a todos!
