PNG con transparencias
Hoy voy a tratar un tema relacionado al de ayer, el de las transparencias de las imágenes PNG. Gracias a ellas podemos aplicar efectos de transparencias muchos mas complejos que los de las imágenes GIF o las opacidades de CSS.
Usar las transparencias de una imagen PNG en una web debería ser tan facil como incluir esa imagen en el documento, pero como es habitual nuestro amigo Internet Explorer nos va a complicar un poco esta labor.
Transparencias PNG con CSS
Internet Explorer usa una propiedad CSS plara aplicar filtros a las imágenes, uno de ellos nos permite que muestre las ansiadas transparencias PNG. Antes de usar este filtro deberíamos crear un div, o cualquier otro elemento que nos interes, al que le pondremos la imagen de fondo, por lo tanto tambien deberemos especificar su tamaño de manera que coincida con el del PNG.
.cubito {
width: 273px;
height: 280px;
/* Para nuestro amigo Internet Explorer */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,src=’cubito.png’);
}
/* Para el resto de amigos */
.cubito[class] {
background-image: url(cubito.png);
}
Estas dos clases nos serviran para convertir un elemento del HTML en nuestra imagen PNG. La primera de ellas se ocupa de definir su tamaño y usa el famoso filtro de IE. La segunda es para el resto de navegadores, que ademas es ignorada por IE gracias a su atributo [class].
Lo negativo de este método es que tenemos que crear una clase CSS para cada imagen PNG a la que queramos activar sus transparencias.
Un ejemplo de esta técnica.
Transparencias PNG con CSS y JavaScript
El siguiente método fue creado por Erik Arvidsson usando la propiedad CSS behavior, con la que podemos asignar comportamientos escritos en JavaScript a cualquier elemento. Para usar el código escrito por Erik, simplemente tendremos que añadirlo a los elementos img usando la propiedad comentada antes.
img {
behavior: url(”pngbehavior.htc”);
}
El código escrito en pngbehaivor se encarga de aplicar a las imagenes PNG con trasparencia el necesario filtro de IE, ademas hay que tener en cuenta que se apoya en una imagen GIF transparente de 1×1 píxeles.
Un ejemplo de esta técnica y una versión comprimida descargable.