Transparencias con png en html y css

Usar png ó no es una decisión dura en el momento de hacer paginas web, si miramos los navegadores anticuados como el INTERNET EXPLORER 6 y menos, no aceptan las transparencias .png, esto fue a razón de que el navegador se dejo de actualizar por un gran tiempo y como todo iba avanzando, pues microsoft no le dio el soporte necesario, el hecho es que cuando tenemos diseños y ya los vamos a pasar a html y css, algunos elementos y efectos son complicados de hacer con un gif normal, ya que saldría como mordido, ósea pequeños pedacitos y pixeles en blanco alado de las curvas, esto por que el gif es en calidad menor que el png, así que con el truco de continuación podremos usar el .png en nuestros diseños sin que se afecte por navegadores REPITO ANTICUADOS.

Hay una solución fácil y otra pues mas compleja, la primera es:

en la hoja de estilo le das este código…

/*Hacks*/
/*H_1 Transparencia png*/
.esquina_hack{
background-image: url(“../img/esquina.png”) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/esquina.png’);
}

Donde background-image: url(“../img/esquina.png”) !important; , es la instrucción normal en css para llamar a un fondo, y filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/esquina.png’); es algo llamado FILTROS que solo lo soporta el internet explorer, estos filtros son variados, pero entre ellos esta el que soporta las transparencias en los png. en el filtro hay algo a tener en cuenta, en los fondos se coloca la direccion de la imagen según… desde la ubicación del css, ósea “../img/esquina.png”, para los filtros de el internet explorer toca colocar como si estuvieras llamando desde el archivo principal, ósea “img/esquina.png”, sino no te funcionara, y diras Andrés Lara care nalga.

Otra opcion es usar un script javascript, que permite que podamos usar los png sin ningun hack css, y este es:

1. Creas un archivo llamado pngfix.js en una carpeta llamada JS, que es donde siempre debes almacenar los archivos javascript, y colocas este codigo:var arVersion = navigator.appVersion.split(“MSIE”)
   var version = parseFloat(arVersion[1])

   if ((version >= 5.5) && (document.body.filters))
   {
   for(var i=0; i<document.images.length; i++)
   {
   var img = document.images[i]
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
   {
   var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
   var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
   var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ “
   var imgStyle = “display:inline-block;” + img.style.cssText
   if (img.align == “left”) imgStyle = “float:left;” + imgStyle
   if (img.align == “right”) imgStyle = “float:right;” + imgStyle
   if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
   var strNewHTML = “<span ” + imgID + imgClass + imgTitle
   + ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
   + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
   + “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
   img.outerHTML = strNewHTML
   i = i-1
   }
   }
   }

2. Lo llamas desde la pagina web que quieres que soporte la transparencia png de la siguiente forma:
   <script src=“js/pngfix.js” type=“text/javascript“></script>
   
3. Y listo a usar png como loco, recuerda el tamaño de las imagenes que no se vaya a exceder mucho. chao