PNG’s transparentes en IE6

14/Ago/2006 312

Es indiscutible las bondades que ha traído la inclusión de Unisys del formato PNG. Lo mejor de él, es la mayor profundidad de colores (miles, aún comprimido) y la facilidad de uso de su canal alfa. Su uso en web aún es limitado, ya que como no será sorpresa, Microsoft Internet Explorer no lo soporta ni siquiera en su versión 6 (al parecer sí en la v7). Mozilla Firefox, Apple Safari, Opera y otros no tienen problemas con visualizarlo.

La idea de este post es crear un PNG transparente con un drop shadow (sombra) negro para que se note su ventaja con respecto al ultrapasado, pero nunca mal ponderado GIF transparente. Existen muchos códigos que permiten utilizarlo, con JavaScript o filtros de IE, pero ninguno funciona correctamente sobre CSS.

Sigue el estilo utilizado:

#imagen {
width: 400px;
height: 219px;
background-image: url(«pildora.png») !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’);
}

Explico: el ancho y alto son para establecer un área y que todos los browsers abran la imagen del mismo tamaño. El problema que se tiene con los filter, radica en que funciona para IE pero no para Firefox, y si agregamos el background, funciona en Firefox pero no en IE. La solución es agregar !important, para que Firefox tome ciertos elementos, y otros no. Además aún así el código XHTML valida según W3C, no el CSS ya que filter es de Microsoft y no de W3C (corregido).

La solución es utilizar un background normal para Firefox con un !important y justo debajo un background vacío (none), ya que IE no reconoce !important y tomará como referencia el inmediatamente siguiente. Luego de esto, viene el filter vacío (none nuevamente) y una cláusula !important para Firefox y el consiguiente filter AlphaImageLoader para que IE reconozca el alfa sobre los PNG’s.

Un detalle que puede que hayan notado: en el filter de IE se especifica la ruta de la imagen en un nivel diferente que la de IE. Esto porque la imagen se debe de especificar no desde la ruta del CSS (como ocurre con el background), sino con dirección de la raíz de la página web (no del sitio, me refiero a llamarla de forma relativa, no absoluta).

Ver resultado

Suerte y a disfrutar del buen diseño con los PNG transparentes.

PD: gracias por sus comentarios para hacerme ver el error de validación del CSS.

Comentarios

  1. Amyblabs [#]

    buy stromectol pills

  2. Rex Baldwin [#]

    neoral propecia imdur

  3. Donald Kuebler [#]

    It is the best time to make a few plans for the longer term and it’s time to be
    happy. I have learn this post and if I may just I want to
    counsel you few interesting issues or suggestions.
    Perhaps you could write subsequent articles referring to this article.
    I wish to read more issues about it!

  4. James Loya [#]

    levaquin amaryl clomid

  5. Sabra Day [#]

    Ahaa, its good conversation concerning this piece of writing here at this blog, I
    have read all that, so at this time me also commenting here.

  6. cetirizine walmart [#]

    walmart zyrtec coupon – https://allergyd.com

  7. zyrtec prices walmart [#]

    major brand cetirizine – https://allergyd.com

  8. pwhyxlgqqvj [#]

    kZpSOb aeeqdowwxfgw, [url=http://caxckgnatcpe.com/]caxckgnatcpe[/url], [link=http://kmrjtpahtqki.com/]kmrjtpahtqki[/link], http://gksiomythmdt.com/

  9. stromectolforte.com [#]

    ivermektin eladГі http://stromectolforte.com/ ivermectin for humans amazon topical ivermectin for humans over the counter

  10. ivermectin tablets for sale walmart [#]

    ivermectina https://stromectolforte.com/ ivermectin eye drops stromectol indications and usage

  11. Miablabs [#]

    generic cialis medication

CSSLab