PNG Transparent no IE6 e IE5 - Solução Definitiva

PNG Transparent no Internet Explorer 6 e 5
(solução definitiva)

Bom, 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:**

** http://forum.imasters.com.br/public/style_emoticons/default/seta.gif/> 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:

http://www.carlosroberto.hbe.com.br/im/png/testpng.html'> http://forum.imasters.com.br/public/style_emoticons/default/seta.gif/> Link DEMO
**
Preview no IE5:**

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.carlosroberto.hbe.com.br/im/png/pngfix.JPG&key=2c97a5488f6a2591352c7dc7ab8052b7e958f532fa561d2b650813f61be9ca48" alt="Imagem Postada" />

Ainda não terminei o site que estou montando usando essa técnica, portanto não sei se tem algum bug!

Bom pessoal, fica ai mais essa dica!

Este post também está no meu blog:
http://www.crgdesign.com.br/blog/png-trans...cao-definitiva/

Abraços!

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/> http://forum.imasters.com.br/public/style_emoticons/default/grin.gif/>

editado por Carlos Designer:corrigido alguns códigos e links