CSSLab

Transparencias a prueba de browsers

Tweet

Hasta no hace poco, para lograr transparencias en imágenes para web, el método era exclusivamente hacerlo con un SWF. Con la masificación del PNG, esto se ha hecho más fácil y el resultado es bastante satisfactorio (no como esos horrendos bordes dentados de los eternos GIF), pero lo complementaremos bastante con el uso de CSS.

Propiedades del browser

Cada browser tiene su propio método de aplicar opacidad a las imágenes. CSS ha implementado 3 diferentes propiedades que afectan la transparencia de un elemento:

• opacity: con valores decimales entre 0 (invisible) y 1 (sólido). (CSS3)
• moz-opacity: también con valores decimales entre 0 y 1. (Firefox)
• filter: es una propiedad de IE (5.5+) el cual trae varios efectos (degradaciones, desenfocado, sombras, etc). Para lograr la transparencia se ocupa el filtro alpha, con valores entre 0 y 100.

Al declarar las 3 propiedades juntas mediante CSS y con el mismo valor de opacidad, podrás tener una transparencia a prueba de browsers:

#elementotransparente {
     opacity: 0.4;
     -moz-opacity: 0.4;
     filter: alpha(opacity=40);
}

Y utilizando comentario condicional para IE (recomendable):

<style type=“text/css”>
     #elementotransparente { opacity: 0.4; -moz-opacity: 0.4; }
</style>
<!—[if IE]>
     <style type=“text/css”> #elementotransparente { filter: alpha(opacity=40); }
     </style>
<![endif]—>

Ver ejemplo

La transparencia la puedes aplicar en bloques (un div por ejemplo) o a elementos individuales (imágenes, textos). Importante es considerar el nivel de lectura, si quieres darle transparencia a bloques de texto, por ejemplo. Por último, ninguno de estas 3 propiedades validarán por la W3C. Depende de tí si es importante que tu hoja de estilos valide.

Probado en: Safari, IE6, IE7, Opera9, FF 1.5.3+

Links:

• IE Filter
• Opacidad de Mozilla
• Opacidad de CSS3