JMiur [E]

Hasta hace muy poco tiempo, las imágenes en formato PNG (Portable Network Graphics) eran una rareza que sólo se usaba en algunos productos de Macromedia pero, con el tiempo, su uso se ha extendido desde que los creadores del formato GIF comenzaron a hacer valer su patente de software.

Los PNG, un acrónimo que significaba PNG no es GIF (PNG's Not GIF) llegaron para mejorar significativamente las deficiencias del formato GIF, ampliando la resolución que estaba limitada a sólo 256 colores y agregándole la llamada alpha transparency es decir, la posibilidad de hacer imágenes transparentes.

El resultado es un archivo con cierta compresión y sin pérdida de resolución lo que nos permite crear imágenes con buena profundidad de contraste y de alta calidad.

El problema es que Internet Explorer (fundamentalemte las versiones anteriores a IE7) no los muestra correctamente, simplemente ignora esas transparencias y se ven opacos:

Internet ExplorerFirefox

Para solucionar este problema existen diferentes trucos que pueden usarse, algunos más complejos que otros:
  • SuperSleight
  • PNG Hack
  • PNG Transparency in IE6
Pero, uno de los más sencillos de implementar es una alternativa que utiliza CSS y una imagen falsa para engañar a IE.

Lo que debemos hacer es crear un GIF transparente de cualquier tamaño y alojarlo en algún servidor; luego, inmediatamente después de <b:skin>, colocamos el siguiente código:
* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
Eventualmente, también podríamos copiar el código, guardarlo como un archivo con extensión CSS, alojarlo en un servidor y luego, cargarlo con los hacks condicionales:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="URL_archivo.css" />
<![endif]-->
En este archivo de texto está el código CSS utilizando un GIF alojado en ImageShack.

Y aquí pueden verse las demostraciones en dos páginas web sencillas:

Página normalPágina con CSS agregado
CLICKCLICK

Lo que hace este hack es verificar las etiquetas IMG y, si son archivos PNG, les aplica el filtro AlphaImageLoader, un efecto exclusivo de los navegadores de Microsoft, las coloca como fondo (propiedad background) y luego, reemplaza el atributo src por el GIF transparente.

Nota: esto no funcionará si la imagen es redimensionada por el navegador.

REFERENCIAS:
  • komodomedia

  • Creative Use of PNG Transparency in Web Design
  • 13 comentarios:

    EnPro  

    Hey que bien esta este hack, tratare de implementarlo en el Blog :)

    Siempre traes algo nuevo por eso me gusta este Blog :)

    Gracias...

    Responder
    JMiur  

    Es de los más sencillos que he visto y parece funcionar bien :)

    Responder
    Paula  

    Hola!
    Sabes que este hack me viene muy bien, porque el header de mi blog es png, pero no puedo hacer que funcione.
    Subì la imagen transparente que tu tienes en image shack a photobucket, y despues pegue el codigo en mi plantilla, poniendo la url donde dice, pero no me resulta, y me sale un error: Mensaje de error de XML: The entity name must immediately follow the '&' in the entity reference.

    No se bien como lo puedo arreglar... me puedes ayudar por favor?
    Gracias, que estes bien :D

    Responder
    JMiur  

    Es extraño, acabo de probar otra vez por si había un error y Blogger aceptó el código correctamente.

    El problema es algo referente a la sintaxis. Puede ser que al cambiar la imagen sobre o falte un caracter. Prueba copiando otra vez el código original del archivo TXT. Si no se produce el error, el problema es ese (la direccion de la imagen va entre comillas).

    Si se sigue produciendo el error (caprichos de Blogger) podrías cambiar los caracteres & por &amp; (hay 4).

    Sea como sea, si quieres, puedes enviarme el código por mail y lo reviso

    Responder
    Paula  

    Hola! yo de nuevo.
    Gracias por responderme. :D
    Copié el mismo texto del archivo txt que dejaste, inmediatamente despues de b:skin>... y me volvio a salir el mismo error.
    Que mas puedo hacer?
    Chau

    Responder
    JMiur  

    Con el código del TXT no tengo dudas ahora bien, tal vez sea que en tu plantilla aparezcan datos después de <b:skin> que hagan que se produzca el error. No puedo verlo correctamente pero, aparentemente, la primera difinición CSS es:

    #outer-wrapper {
    }

    todo lo que está antes son variables de Blogger que no importan. Prueba copiar y pegar el código del TXT justo antes de eso. Quedaría:

    ::: CODIGO HACK PNG :::

    #outer-wrapper {
    }

    Si sigue habiendo un error, envíame la plantilla por mail así la pruebo y te puedo dar una respuesta más concreta.

    Responder
    solrac  

    Estoy haciendo unos pequeños cambios en mi blog y estos días me he puesto con el dichoso problema de los .png

    Después de ver varios sitios, incluido el tuyo JM ;) he utilizado la solución del AlphaImageLoader pero una versión más reducida a la que indicas (vista en sergiocerrutti.com)

    Este hack lo he puesto para la imagen del Header, mi código es:

    background:url("url/logo.png") no-repeat 10px top !important;
    background: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="url/logo.png");

    lo he probado con FF 2.0 e IE 6.0 y funciona perfectamente ;)


    PD: ¿alguien me podría decir si le gusta mi nuevo header? :)

    Responder
    solrac  

    en mi comentario anterior hay un pequeño problema con los emoticons :(

    en el último parámetro 'filter', después de "prodig" van ":", o sea, quedaría "prodig:" y justo después iría "DXImageTransform".


    PD: JM, ¿hay manera de incluir el script que cambia los grupos de caracteres para poner lo emoticons al pulsar "vista previa" al publicar un comentario?

    Responder
    JMiur  

    El header está muy bien, amigo .. ¿alguna vez dejará de ser Beta o será como Google? :D

    Lo del los PNGs está perfecto; ahora, lo que estoy usando es el script de de Google Code y, por el momento, estoy satisfecho con los resultados. Me ha ayudado a resolver muchos detalles.Recomiendo darle una mirada.

    Lo de los comentarios, es imposible. Es que no tenemos acceso a nada de esa parte del código o, por lo menos, no veo forma de acceder.

    Responder
    Gem@  

    No puedo ver las demostraciones J.Miur :O

    Responder
    JMiur  

    Gem@:
    Parece que el problema era SkyDrive, gracias a Yahoo ahora funcionan :D

    De todas formas, me parece que es mejor usar el script de Google de este post. Por lo menos, es lo que uso actualmente en el blog porque resuelve varios problemas al mismo tiempo.

    Responder
    yakp  

    Sabes si este hack de png para ie6 funciona bien en el caso que hayas usado un png transparente en la propiedad background-image ??

    Responder
    JMiur  

    Desconozco como funciona en IE6.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR