Es indiscutible las bondades que ha traído la inclusión de Unisys del formato PNG{.blank}. 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{.blank}, 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.