Semitransparencia en pngs - y el maldito IE

Aquel webmaster que se precie ya habrá tenido problemas con los png,
las transparencias y el maldito explorador de internet que no cumple
estándares.

Para el que no lo sabe, Png es por "Portable Network
Graphics", o gráficos portatiles para red, creado para mejorar el
formato gif (256 colores, transparencia de mapa de bits.... muy
ochentoso). Además de ser mejores que los gifs, no requieren una
licencia para usarlos (si, todos los programitas que crean gif tienen
que comprar la licencia....). Otra acepción del acrónimo, una recursiva
como nos gusta a los geeks, es "PNG is Not Gif".

Básicamente te
deja tener imágenes de 24 bits color o blanco y negro (con paleta) o
imagenes RGB (no CYMK, pero es para web asi que no hay problema,
verdad?). Tambien usa varios métodos de compresión, entrelazados,
etc,etc.

En definitiva: es el sueño de cualquier diseñador web,
porque podés hacer cosas muy interesantes con ellos (que con jpg o gif
serían bastante molestas o imposibles).

Funcionan bien en todos
los navegadores web, son un estándar con muchos años ya pero, la mala
noticia es que en ie 6 o menor no funcionan las transparencias,
personalmente, yo tengo que hacer sitios que se vean perfecto en varios
browsers, incluyendo ie6 (maldición!), el cual no muestra png con
transparencias a menos que lo obligues.

Ahora a ver como se lo obliga :D

La magia básicamente se logra con AlphaImageLoader, un apestoso parche para cargar bien los png (mencioné que fueron creados para la web?).
La
idea de Micro$oft, para variar fue no usar el estándar ya establecido y
crear un "truquito" para que las cosas anden como deberían.

la magia es como sigue:
lo que en cualquier navegador funciona haciendo esto:

div#imagen_de_fondo {
	width:600px;
	height:400px;
	background-image: url(images/YourImage.png);
	background-repeat: repeat-y;
	position:absolute;
	top: 82px;
	left: 46px;
	padding-left: 25px;
}

en ie 6 funciona agregando esto:

div#imagen_de_fondo {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/YourImage.png,sizingMethod='scale');
}

Y listo! (en teoría!)
Así tenemos backgrounds con png's transparentes. Excelente. aca hay un ejemplo
Falta el tema de los tags img, si usamos una imagen png con transparencia, no va a funcionar.

La solucion a eso:
Reemplazar los img por divs con background.

Probablemente más tarde un post de cómo hacer esto :D

que lo disfruten.




Technorati Tags: semitransparencia, png, web development