Tips CSS3 – Colores RGBA

Una de las buenas nuevas en CSS3, es el soporte RGBA, el cual nos brinda la capacidad de usar transparencias. RGBA es similar a RGB, pero con la adición de un canal extra, conocido como canal Alfa el cual define la opacidad de un píxel en una imagen.

Esto quiere decir, que a un elemento que admita transparencia, a los tres canales de color básicos RGB que definen la cantidad de rojo, verde y azul respectivamente del píxel, se añade un cuarto canal, el alfa, que define el grado de opacidad de ese píxel.

En lo que a trabajar en la web refiere, los valores del canal alfa están comprendidos entre 0 y 1, donde 0 significa que el píxel no tiene ninguna opacidad, es decir es completamente transparente y 1 significa que el píxel carece de transparencia alguna, es decir, es completamente opaco.

De esta forma, suponiendo que el color se expresa utilizando una tupla RGBA, los valores { 255, 0, 0, 0.5 } implicaría un píxel de color rojo puro y con un 50% de opacidad.

Ahora veamos como hacer uso de este formato con CSS3, aplicando color al fondo de las secciones definidas.

<td>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 1)  ;"></div>

</td>

Esto luce así:

También podemos aplicarlo a otros elementos, por ejemplo a un texto:

<div style="color: rgba(200, 0, 0, 0.3);">Texto con transparencia</div>

<div style="color: rgba(200, 0, 0, 0.7);">Texto con transparencia</div>

Esto nos permitirá ver el color de nuestro texto con transparencia, tal como vemos a continuación:

Ejemplo de texto con transparencias

Texto con transparencia

Texto con transparencia

Como podemos ver es muy fácil lograr efectos interesantes usando las nuevas funcionalidades incluidas en CSS3, y con un poco de practica e ingenio no queda mas limite que la imaginación.