¿Cómo lograr colores transparentes con CSS3?

5 agosto, 2017 • 3 minutos

Con CSS3, ahora podemos fácilmente definir transparencias con los colores. Es decir, podemos bajar la opacidad de los colores de manera sencilla. Sigue leyendo para aprender cómo aplicar esto utilizando CSS3.

¿Cómo lograr colores transparentes con CSS3?

¿Qué es RGBA?

RGBA es simplemente una extensión de la notación RGB con la adición del Alpha. RGB, por sus siglas en inglés Red Green Blue, es una forma de especificar los colores. A continuación se muestran algunos ejemplos de esta notación:

rgb(0,0,0) : Negro
rgb(255,0,0) : Rojo
rgb(0,0,255) : Azul

Por lo tanto, podemos ver que para la notación de colores en RGB necesitamos 3 valores, cada uno entre 0 y 255. En el caso de RGBA, agregamos un cuarto valor que indica la opacidad del color, entre 0 y 1, donde 1 es total opacidad y 0 total transparencia. A continuación se muestran algunos ejemplos:

rgba(0,0,0.5) : Negro con opacidad 0.5
rgba(255,0,0,0.2) : Rojo con opacidad 0.2
rgba(0,0,255,1) : Azul con opacidad 1

Asimismo, gracias a este método, podemos generar un div con transparencia encima de otro div y otros trucos divertidos. Por otro lado, también podemos elegir un color fijo y cambiar las tonalidades, por medio de transparencia, para lograr distintas combinaciones.

¿Dónde puedo aplicar estas transparencias?

Los colores RGBA, colores transparentes, pueden ser utilizados en distintos parámetros como: colores de fondo (background-color), colores de texto (color), color de border (border-color), color de sombra (box-shadow), entre otros.

¿Cómo aplicar colores transparentes en CSS?

Luego de haber entendido el uso de los colores RGBA, aplciarlo en nuestro código CSS es muy sencillo.

#1: Color de fondo

Un DIV con fondo negro con opacidad de 0.2

div{
background-color: rgba(0,0,0,0.2);
}

#2: Color de texto

Un DIV con fondo negro con opacidad de 0.2 y color de texto azul con opacidad 0.8.

div{
background-color: rgba(0,0,0,0.2);
color: rgba(0,0,255,0.8);
}

#3: Color de borde

Un DIV con fondo negro con opacidad de 0.2, color de azul con opacidad 0.8 y color de borde rojo con opacidad 0.2.

div{
background-color: rgba(0,0,0,0.2);
color: rgba(0,0,255,0.8);
border: 5px solid rgba(255, 0, 0, 0.2);
}

#4: Color de sombra

Un DIV con fondo negro con opacidad de 0.2, color de azul con opacidad 0.8, color de borde rojo con opacidad 0.2 y color de sombra negra con opacidad 1.

div{
background-color: rgba(0,0,0,0.2);
color: rgba(0,0,255,0.8);
border: 5px solid rgba(255, 0, 0, 0.2);
box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
}

#5: Mismo color, diferentes opacidades

Un DIV solo de color rgb(142,173,6) con fondo de opacidad 0.2, color de texto 1, borde 0.2 y sombra 1.

div{
background-color: rgba(142, 173, 6,0.2);
color: rgba(142, 173, 6,1);
box-shadow: 5px 5px 0px 0px rgba(142, 173, 6,1);
border: 5px solid rgba(142, 173, 6,0.2);
}

Se tiene que entender que la transparencia se da con referencia al color de fondo que existe abajo. Es decir, el color de fondo del DIV tiene opacidad 0.2 con referencia al fondo blanco. Mientras que el color de borde tiene opacidad 0.2 con referencia al color de fondo del DIV.

☕

¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎

Invítame un cafecito