Opacidad en un diseño Web

Anteriormente, discutimos la propiedad de CSS3 llamada border radius o bordes curvos/redondos en un diseño Web. Hoy vamos a discutir la propiedad de CSS3 llamada opacidad, la cual es bastante obvia dado su nombre y para los que utilizan Photoshop y le da cierta opacidad a un layer, pero vamos a discutir en qué casos deberíamos de recurrir a ella y cuáles mejor no.

La opacidad en CSS3 hace que tanto el elemento pariente como hijos tengan un grado de opacidad definido por una escala del 0.1 al 1, siendo esta última el valor «menos» opaco. Dicho en otras palabras, el valor de 1 no asigna opacidad del todo.

La sintaxis

Para obtener un bloque de elemento con un poco de opacidad nada mas declaramos el siguiente código:

    .opaco {
    width:300px;
    height:150px;
    background:#fff;
    opacity:0.5;}

Esto nos produce el siguiente efecto:

Note como parte del fondo del sitio se aprecia.

¿Cuando es apropiado utilizar la opacidad?

Nosotros utilizamos la opacidad en nuestro portafolio, cuando un usuario pone el cursor encima de la foto de cada diseño Web que hemos realizado. Adjunto puede apreciar la misma imagen en ambos estados; una sin opacidad (valor igual a 1) y otra con una opacidad de 0.55.

Este efecto le añade un poco más de interacción a nuestro diseño Web utilizando sólo un recurso (la imagen) en vez de utilizar dos y hacer un sprite, y a su vez, no pasa nada cuando un usuario que utiliza un navegador viejo, pone el cursor encima. Igual el cursor cambiará para indicarle que la imagen se trata de un hipervínculo.

Evite su uso en el siguiente escenario

Expusimos de que la opacidad es generada tanto en el bloque pariente como sus hijos anteriormente. Si interpretaron esto de manera correcta, se van a percatar de que tanto el texto como imágenes tendrán la opacidad. Veamos la siguiente caja:

    .opaco_text {
    width:300px;
    height:150px;
    color:#000;
    background:#fff;
    opacity:0.5;}

Nos dará el siguiente efecto:

Como notarán, el texto también sufre de opacidad lo cual no era lo que teníamos en mente (sólo queríamos el fondo con opacidad) actualmente no existe una forma de poder "frenar" el efecto a hijos del elemento al cual le estamos asignando una opacidad. Sí existe otra forma, utilizando otra propiedad que logra el efecto que queremos, y la pondremos en nuestra siguiente entrada.

Soporte de opacidad en Internet Explorer

Internet Explorer 8 y versiones anteriores no soportan la opacidad; aquí tenemos tres opciones; podemos aplicar un filtro propietario de Microsoft llamado filter: alpha(opacity=50); el valor 50 es el equivalente a 0.5. Podemos asignarle una imagen semi-transparente PNG como fondo con la opacidad deseada, utilizando una declaración condicional para dichos navegador (si es una imagen de fondo, no una imagen en si), o podemos dejarlo tal como está. Personalmente tratamos de utilizar la última opción o la segunda. Consideramos que utilizar la primera (filtro de Microsoft) conlleva mucho tiempo de carga, esto tiende a hacer más lenta la carga de la página y el fondo semi-transparente no es tan pesado, pero conlleva el problema de que Internet Explorer 6 tampoco soporta imágenes con transparencia en PNG a 24 bits, nos hace mirar otra vez hacia un filtro. Existen soluciones para esto, pero de nuevo, es volver a comenzar a enredar nuestro diseño Web para que navegadores viejos se vean "bien". Nuestra posición es por lo tanto de que si un usuario tiene un navegador viejo, la experiencia será limitada. Nosotros hacemos el fondo PNG para navegadores superiores a IE 7.0.