opacity.jpg

Opacity en CSS

En un proyecto que estaba realizando me encontré con los ya conocidos problemas de la propiedad opacity en CSS.

Cada navegador (como de costumbre) tiene su forma de entender esta propiedad. Analizaremos las distintas interpretaciones y una solución estándar, a la vez que válida para cualquiera de los casos.

El caso especial de Internet Explorer

Ya por norma general, el navegador de microsoft es el más «raro» de todos. El necesita usar un comando filter que se encarga en este caso de filtrar el grado de opacidad.
filter:alpha(opacity=20);

Opera, Firefox y navegadores basados en Gecko

Estos hacen uso de la instrucción: -moz-opacity

El estándar

Es la propiedad opacity, tal cual -como debe ser-. El problema es que pertenece a CSS 3 y actualmente estamos inmersos en CSS 2 el cual no lo soporta todavía. Esto provoca que al validar nuestra hoja de estilo nos devuelva un error al respecto.

A pesar de ello, algunos navegadores ya se han adelantado a la especificación, e interpretan correctamente la propiedad opacity, es el caso por ejemplo de Firefox 2 y las últimas versiones de Opera.

Que los navegadores se adelanten a la especificación no me parece mal, de heho empujan al mercado (y esto en cierto modo es bueno). Pero debemos tener en cuenta que nuestra hoja de estilo sigue siendo CSS2 y por tanto NO válida.

Solución alternativa válida

Una solución que a mi parecer (y en determinados casos) me parece muy elegante es la que he implementando para el proyecto en el que estoy trabajando.

  1. Creamos una imagen con un tamaño de 1*1pix.
  2. Pintamos la capa de la imagen con el color que deseemos.
  3. Jugamos con el factor de opacidad en nuestra aplicación de retoque gráfico.
  4. Escogemos el formato gráfico PNG24, que será idoneo para llevar el efecto de opacidad a la Web.

Internet explorer tiene algunos fallos conocidos e incompatibilidades con este formato. En cualquier caso para lo que buscamos será perfectamente válido para prácticamente todos los navegador (incluido el de la discordia).

Ya solo queda indicar en la hoja de estilo que usaremos un fondo con la imagen que acabamos de diseñar. Esta imagen será la encargada de hacer realidad nuestro efecto de opacidad.

background: url(opacity.png) repeat;

Indicamos el atributo repeat para que se repita tanto en el eje de coordenadas X como Y. Facilitando la no dependencia de la imagen al tamaño del contenedor.

Y ahora si que podemos decir que tenemos una hoja de estilos válida, al igual que funciona de la misma manera para los navegadores más comunes tanto en el presente como en el futuro.

Compartir:

5 Comments

  • Frederic Garcia

    Buenos dias,

    Estaba buscando como crear una capa con opacidad, sabia de la propiedad opacity de css pero me encontraba con que al poner opacity en una capa, todas las capas que se encontraban en su interior también se transparentavan, cuando sólo quería transparentar la capa más exterior (que representa el fondo de las demás). He probado la solución de usar un png y funciona de maravilla bajo firefox, no obstante, en iexplorer no me realiza la transparencia sino que se ve totalmente opaco. La imagen es PNG24 generada con Adobe Photshop y siguiendo la opción de guardar para web.

    Si saben como solucionar el problema para I.E. os estaré muy agradecido.

    Muchas gracias por su atención 😉

  • Si he entendido bien…
    Lo que te aconsejo es generar las opacidades, transparencias y todos los efectos en photoshop, y luego recortar literalmente esos fragmentos e implementarlos en tu diseño web.

    La idea al final es que el trabajo de diseño venga ya en la propia img (simulando esa transparencia) y no hacerla por medio de CSS o combinaciones de formatos PNG, porque por desgracia IE te dará problemas.

    De esta forma estas asegurando una compatibilidad total, puesto que la imagen es igual para TODAS las plataformas.

    Espero haber entendido tu pregunta y que te sirva de ayuda la solución.

    Saludos.

  • Hola tengo un inconveniente con el atributo opacity, cuando quiero validar el css me dice que el atributo no existe, sabes alguna solucion a esto
    Aca esta el link para validarl el css

    Gracias
    Saludos

  • Hola Franco.

    Justamente tienes el problema comentado en este artículo.

    Lo que tienes que hacer es usar «el estándar» y la «solución alternativa valida» comentada anteriormente.

    Mientras uses: -moz-opacity seguirás teniendo el problema y error en validador w3c, puesto que es una solución propia de navegadores basados en gecko.

    Saludos 😉

  • ciudadano86

    Gracias, era justo lo que estaba buscando. Ahora tengo una web con CSS válido.

    Gracias

Comments are closed for this post