Transparencias a prueba de browsers

24/ene/2007 11

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:

Comentarios

  1. fearlex [#]

    Muy interesantem aunque me gustaria saber si la propiedad opacity de CSS3 validará en la W3C. Podra esta propiedad sustituir a Filter de IE y a -moz- de mozilla, o es solo otra opcion mas y tenemos que seguir usando los tres si queremos opacidad ?

  2. CSSLab Admin [#]

    si, opacity en css3 porq es de la w3c. si reemplazará a las otras 2? depende de los browsers…

  3. Jonathan [#]

    Hola me parecio interesante tu comentario, bueno pero mencionas que se usa swf para las transparencias, sin embargo estoy probando la transparencia de un swf en FireFoz pero bajo entorno Linux y no funciona, eso es por que el wmode no funciona bajo Linux? estoy en la version 2.0.0.2 de Firefox, o me falta instalar algo, me agradaria q me contestaras lo que sabes tu al respecto.

    este es el codigo q cuso

    Creo q todo esta bien !! ?? Bueno gracias.

  4. CSSLab Admin [#]

    Jonathan, lamentablemente por aqui no puedes copiar codigo, sino está formatado en HTML. sino, trata de ponerlo en los foros, a ver si puedo investigar ma sobre eso. Saludos.

  5. GARY [#]

    aaa pos alguien podria desirme donde se coloca el testo para ke se valide el codigo ????

  6. CSSLab Admin [#]

    Gary, no hay solucion directa. podrias inyectar el codigo de transpoarencia q no valide mediante JS por ejemplo, o hacerlo directamente via algun framework de JS. Suerte.

  7. GARY [#]

    bien muchas gracias con esto vere ke puedo hacer

  8. » Ventana modal sólo con CSS | CSSLab [#]

    […] Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del método cross-browser: […]

  9. jose [#]

    Se puede logra que el contenido no quede transparente… solo el fondo???

    Gracias

  10. Jorge Epuñan [#]

    jose, para eso lee el articulo sobre la propiedad RGBa. Saludos.

  11. Validando el CSS de Thickbox ↝ CSSLab [#]

    […] y que son muy importantes: dan la trasparencia a la ventana. Ya las comentamos anteriormente en un artículo sobre transparencias: opacity, -moz-opacity y filter: alpha(). Opacity valida sólo en CSS3 (aún en […]

Responder a Validando el CSS de Thickbox ↝ CSSLab ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab