23feb
14

transparencia

Una de las penurias de todo desarrollador web es obtener consistencia en la presentación de contenidos independientemente del navegador. Una de estas inconsistencias es el modo en que cada navegador gestiona las transparencias de imágenes y objetos.

Pues bien, si quieres aplicar transparencia a un elemento, independientemente del navegador, puedes conseguirlo añadiendo unas líneas de CSS al mismo:

elemento {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, version anterior de safari */
	-moz-opacity: 0.5;       /* firefox, mozilla, netscape */
	opacity: 0.5;           /* safari, chrome, opera */
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*internet explorer 8 - gracias Andres */
	}

Por supuesto, debes acordarte de modificar el “elemento” por el que vayas a adaptar, y saber también que puedes jugar con los distintos niveles de opacidad hasta encontrar el que se ajuste al aspecto que quieres conseguir.

Para saber más:

  • Pingback: Bitacoras.com

  • http://fer.quegrande.org FeR

    Iba a comentar que ya había visto algo parecido en CSS Blog, pero no con esa foto. Se agradece, que hace que uno preste más atención al post xD

  • http://www.anieto2k.com aNieto2k

    Te has dejado el de IE8
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    Saludos

    • http://fernandotellado.com/ Fernando Tellado

      Gracias Andrés, ahora lo añado ;)

  • http://www.foroz.org malder

    jeje, cuidado que puedes tener problemas con adsense!

  • http://danielm.eu Daniel M.

    Para los estrictos con la validación de los estándares, creo que las propiedades “opacity” no la cumplen. Lo tenía en el plugin de “sociable” y daba errores de CSS.

  • http://davidcarvajal.es/wordpress/ David

    Joer vaya fotito, y encima me molan las orientales….. madre mia….de que iba el post por cierto

  • Pingback: Lecturas recomendadas | Primer entrega

  • http://www.vistahermosa.es oficinas toledo

    Que buena la foto, incluso más que la información

  • http://regalosymuestrasgratis.com/ Diego

    Haré este cambio a ver si empiezo a ver las fotos así :P

    Gracias por el dato!

  • Pingback: Transparencias con CSS | diarioTHC, recursos para webmasters, bloggers y diseñadores

  • Juan

    Hola, estoy aplicando las tranparencias a un menu desplegable. En internet explorer 8 me funciona una sola vez al pasar por arriba ya yadespués no vuelve a funcionar la tranparencia, obviamente solo si alcualizo la página. Qué puedo estar haciendo mal?

    Saludos y estaré muy agradecido si puedieran ayudarme.

  • queseyo

    Excelente… lo probé y funciona fantástico

  • http://twitter.com/ipaelo Ismael Torres

    Muchas gracias. El de Internet Explorer me ha ahorrado un rato de busqueda