RGBA, propiedad CSS3 para diseño Web

En nuestro tópico anterior, discutimos la opacidad en un diseño Web, el cual tiene la limitante de que los elementos hijos del elemento que tiene la opacidad (pariente), heredan de manera automática dicha opacidad cuando realmente lo que queremos es tener la opacidad sólo en el pariente. Una forma de erradicar esto es utilizar RGBA en vez de opacidad en un diseño Web.

Para todos los diseñadores Web que han trabajado extensivamente con valores hexadecimales para desplegar colores (fondos, texto, botones, etc), RGBA utiliza los valores RGB para desplegar exactamente los mismos colores que en hexadecimal (Red, Green, Blue por sus siglas en inglés). Pero, nos faltó la A. La A es para el valor ALPHA y su función es controlar el nivel de opacidad para el valor RGB declarado. 1 es el valor menos opaco y 0 es totalmente transparente.

RGBA nos abre la posibilidad de tener fondos de cualquier color con una transparencia controlada por el diseñador Web. Es exactamente el mismo efecto de tener un fondo de un color en Photoshop y poner el layer con una opacidad o «fill» inferior a 100%, pero no existe la necesidad de recurrir a una imagen PNG de 24 bits para llenar dicho fondo.

Esto nos ahorra un recurso, una imagen, lo cual nuevamente, beneficia un diseño Web dado que son menos peticiones hacia el servidor para servir los archivos necesarios para desplegar una página Web. Talvez un recurso sea poco cuando lo vea de dicha manera, pero supongamos que la página de inicio tiene más de 5 elementos que requieren cierta transparencia, llámese menús, botones, fondos, rollovers, lo que quiera. Son 5 o más recursos menos. RGBA por lo tanto, hace un diseño Web muchísimo más eficiente.

Sintaxis de RGBA

Hemos visto el siguiente código muchas veces:

.mitexto {
color:#ffffff;
background:#000000;}

Lo cual surte lo siguiente:

Nada del otro mundo que no hayamos visto antes.

Utilizando RGBA podemos hacer el mismo efecto pero declarado con valores RGB y el Alpha puesto en 1:

.mitexto {
color: rgba(255,255,255,1);
background: rgba(0,0,0,1);}

No existe diferencia alguna entre la declaración de ambas propiedades (asumo que no lo están viendo en Internet Explorer 8.0), sin embargo hay una diferencia entre la declaración de ambas propiedades; una contiene el fondo en hexadecimal para el color negro, la otra utiliza su valor pero en RGB junto con una transparencia (Alpha) de 1.

Ahora vamos a jugar con el valor Alpha. Le vamos a asignar una opacidad del 50% (0.5).

.mitexto {
color:#fff;
color: rgba(255,255,255,1);
background:#000;
background: rgba(0,0,0,0.5);}

Con cambiar un valor (ALPHA) en este caso, dicha caja cambia; así de sencillo pueden manipular otros elementos dentro de un diseño Web para tener opacidad en el pariente únicamente.

Un ejemplo práctico: un botón en CSS3.

Hagamos un botón básico hecho en CSS3 en donde el usuario le pone el mouse encima (referir a la tutoría de bordes curvos en un diseño Web para lograr dicho efecto). El código sería maso menos.

Boton en estado normal:

div.boton a {
margin:0 auto;
display:block;
width:100px;
text-align:center;
height:20px;
padding:10px 0;
color:#fff; /*no declaro RGBA aqui por que quiero 100% blanco */
background:rgba(39,124,145, 0.35); /*bien baja para ver la diferencia */
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

Boton en estado a:hover

div.boton a:hover {
color:#fff;
background:rgba(39,124,145, 1.0); /*sin opacidad, estado normal */ }

Lo cual nos da el siguiente efecto:

Note como no hemos utilizado una sola imagen para lograr este efecto. A puro CSS3 hemos hecho el botón con transparencia incluida y bordes redondos. Sin RGBA y bordes redondos, se hubiese tenido que hacer dos imágenes que cambian de posición de fondo y que sean obviamente con bordes redondos.

Ventajas de utilizar RGBA y bordes redondos para un botón:

¿Por qué debería de utilizar esto en vez de las dos imágenes estilizadas como un sprite de CSS?

1. No hay recursos extras (en este caso, imagínese un menú de botones como estos de 5 ítemes, serían 5 imágenes). Nos ahorramos una petición de la imagen, y nos ahorramos el peso. No se puede comparar en términos de eficiencia un par de líneas de código versus un sprite de imágenes.
2. SEO: Un botón hecho en CSS3 hecho con cierta opacidad ha de tener texto, texto que es legible para efectos de SEO. El recurrir a imágenes hace que el texto forme parte de la imagen, y se guarda cierto valor utilizando el tag de "alt", sin embargo, haciéndolo de esta manera el texto de ancla sí es analizado por buscadores.
3. Mantenimiento: Hacer cambios de color o de opacidad se hace en dos toques. Como en el gremio de diseño Web siempre existen los famosos "cambios", cambiar se hace una cagada de risa. Utilizar sprites significar retocar el archivo maestro (o peor aún re-hacer todo el sprite por no haber salvado 😉 ), subir los cambios y listo. Hacer cambios de esta manera el proceso se convierte más extenso.

¿En qué elementos debería de aplicarlos dentro de un diseño Web?

• Fondos: Ya hemos cubierto este. Fondos con cierta transparencia pueden ser declarados con RGBA. La imagen de la izquierda, de nuestro propio sitio, tiene un fondo en RGBA (el fondo de lo botones).
• Texto: Si queremos darle un toque "diferente" a un texto en particular, podemos asignarle dicha opacidad a el color de texto. El siguiente ejemplo ilustra un header con opacidad RGBA.
• Bordes: ¿Cajas con bordes de distinto color? Claro que si, fácil en un diseño Web con un poco de CSS. ¿Cajas con bordes que tengan cierta opacidad? Claro que sí, fácil con RGBA.
• Botones y menús: Elementos básicos dentro del diseño de una página Web. Ya los cubrimos al inicio de esta entrada.

• 

  Intensidad de sombra: Existe otra propiedad en CSS3 llamada box-shadow, que lo que hace es darle una sombra a un elemento. Para no desviarnos mucho del tema (explicaremos esta propiedad eventualmente en nuestro blog), también se puede medir la intensidad de la sombra (el color) por medio de RGBA. En el diseño Web de Candelas Monterrey es evidente (ver imagen a la izquierda) la sombra sobre el contenido verde. El color es un café, pero tiene cierta opacidad.
• Intensidad de sombra en el texto: Existe otra propiedad en CSS3 llamada text-shadow que lo que hace es darle sombra a el texto. De nuevo, no queremos desviarnos mucho del tema, pero se le puede asignar también la intensidad de sombra del texto.

Internet Explorer de nuevo, se la pela

Lastimosamente, Internet Explorer 8 y versiones anteriores no soportan RGBA, pero lo que podemos hacer es tener un respaldo totalmente degradable para dichas versiones. Lo que hacemos es declarar el background con valores hexadecimales antes de utilizar RBGA, haciéndolo de la siguiente manera:

.mitexto {
color:#fff;
color: rgba(255,255,255,1);
background:#000;
background: rgba(0,0,0,1);
}

Navegadores viejos ignorarán la sintaxis de RGBA, mientras que los nuevos, utilizarán ambas, pero como estamos declarando el valor de RGBA después del hexadecimal, el valor RGBA es el que queda por el factor de precedencia (muy importante saberse este concepto).

En el caso del diseño Web nuestro, lo que hicimos fue lo siguiente para versiones de Internet Explorer:

.ie8 .mitexto {
color:#fff;
background:#000 url(imagen-transparente.png) 0 0 repeat;}

La clase .ie8 se ve sólo para navegadores de Internet Explorer 8 hacia abajo por medio de una condición de lógica (preguntar si el navegador es Internet Explorer 8.0 hacia abajo o no. Es una técnica que recientemente la vi en el blog de Paul Irish. Les recomiendo ver el concepto que el explicar para navegadores de Microsoft.
Si notaron el código anterior, notarán que incluimos la imagen de todas maneras, esto obviamente contradice lo que dijimos acerca de la eficiencia, pero sólo lo estaríamos haciendo para Internet Explorer 8.0 y versiones anteriores. Navegadores modernos (que todos deberían de utilizar por el bien del diseño Web 🙂 ) no ven ese recurso del todo.

Recapitulando:

Utilice RGBA en elementos donde considere necesario. No estamos diciendo que debería de utilizar RGBA en todo, sino que el tener dicha opción le abre el abanico de posibilidades para lograr que el diseño Web se vea de la forma que Ud. como diseñador Web, quiere que se vea.

Se trata de más opciones para lograr mejores páginas Web. Espero que utilicen dicha técnica.