Transparencias con png en html y css

Png transparencia

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
Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , ,
Publicado en Diseño grafico
6 comments on “Transparencias con png en html y css
  1. Wakkos dice:

    mola, esto con PHP puede ser brutal.
    Voy a jugar un poco con eso, luego comento mas xD

  2. mussra dice:

    Esto está muy bien, pero, no sirve para backgrounds no?, es que es justo lo que necesito. En mi web he usado un truquito desde css, que me lo arregla parcialmente, pero me da error cuando uso float. Por lo tanto, habrá que esperar a que la gente se de cuenta de que el internet explorer de microsoft no vale para nada, o a que estos por fín hagan un explorador medianamente decente, puesto que la nueva versión, tampoco es nada bueno…

  3. Pedro dice:

    No es por mal, pero se escribe:
    – o sea, no ósea (esa es la médula)
    – cómodo
    – al lado, no alado (eso son las aves)
    – o no lleva acento (antes entre cifras, ahora no)
    – páginas
    – iba, no iva (que es un impuesto)
    – pedacitos
    – píxeles
    – etc.
    Por cierto, no sé qué quiere decir “care nalga”.
    Un saludo, todos cometemos fallos pero se ven más fácil la paja en el ojo ajeno.. : )

    • donestandares dice:

      😉 tienes toda la razón, hace algunos meses tenia problemas con ortografía, ahora también pero han mermado mucho =) thanks por tu aclaración 😉 ya mismo los corrijo.

    • donestandares dice:

      Claro que en el caso de Pixeles, depende de la pronunciación que se le haga. 😉 igual gracias.

  4. ortografía con acento dice:

    Te han dejado “apañao”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
¡Apareció Linux!

Mirando de lado

Café

Más fotos
A %d blogueros les gusta esto: