CSS es un lenguaje que nos permite modificar el estilo de una página web de múltiples maneras y hoy me apetecía hablarte sobre las transparencias, ya sabes, cuando quieres que cierto elemento se transparente un poco y por ende que se fusione mucho o poco (todo dependerá de cuánta transparencia quieras) con lo que tiene debajo.
Además, decirte que conseguir este efecto es muy sencillo, de hecho solo necesitarás una única orden de CSS para lograrlo. Incluso hablaremos sobre el hipotético caso de que solo quieras transparentar el fondo de un elemento y no todo su contenido como tal (normalmente se hace para que no afecte a las letras), algo que en mi caso he necesitado hacer en varias ocasiones.
¡Consulta nuestros servicios!
Tabla de Contenidos
Opacity: La Orden que Rige las Transparencias en CSS
Opacity es la orden de CSS que nos interesa ya que es la que nos permite definir qué tan transparente es un elemento de la página web, pero como seguramente ya hayas notado, esta orden no es para definir la transparencia como tal, sino la opacidad (lo mismo, pero a la inversa).
Es decir, que opacity nos permite definir qué tan opaco es un elemento (por si alguien no lo sabe, opacidad y transparencia son lo opuesto; algo que no es transparente, es opaco), lo cual al final nos permite definir la transparencia, solo que desde una perspectiva distinta.
Veamos un ejemplo simple y más abajo ya te voy explicando en profundidad:
.ejemplo-opacity {
opacity: 0.5;
}
0.5 significa que siendo 0 algo completamente transparente y 1 algo completamente opaco, quiero un término completamente en el medio (abajo te explicaré mejor cómo funciona este valor). Te muestro primero un texto sin la transparencia y seguidamente uno con la transparencia. Este es el HTML que he usado y tras él verás en vivo ambos resultados:
<p>Hola, soy un texto normal.</p> <p class="ejemplo-opacity">Hola, soy un texto transparente.</p>
Hola, soy un texto normal.
Hola, soy un texto transparente.
A simple vista parece que el texto simplemente ha cambiado de color y en cierto modo… eso es lo que ha ocurrido. Al final, lo que sucede es que el texto, al ser transparente, se fusiona con lo que tiene debajo (que es ese contenedor azul donde escribo los posts) y por ende, cambia de color.
Más o Menos Transparente u Opaco
Ahora te mostraré un ejemplo en el que creo que verás bastante mejor el efecto de transparencia ya que crearé un Grid en el que verás varios niveles de opacidad de una caja de color negro y por lo tanto, a mayor transparencia más similar será al color de fondo del contenedor que está justo debajo.
Añadiré en cada bloque en valor de opacity que se ha añadido en dicho bloque, recuerda que 1 sería algo 100% opaco y 0 algo 100% transparente, por lo que puedes jugar con todos los valores entre 0 y 1 para lograr el nivel de transparencia que quieras.
/* 0% transparente */
.opacity-1 {
opacity: 1;
}
/* 10% transparente */
.opacity-09 {
opacity: 0.9;
}
/* 20% transparente */
.opacity-08 {
opacity: 0.8;
}
/* 30% transparente */
.opacity-07 {
opacity: 0.7;
}
/* 40% transparente */
.opacity-06 {
opacity: 0.6;
}
/* 50% transparente */
.opacity-05 {
opacity: 0.5;
}
/* 60% transparente */
.opacity-04 {
opacity: 0.4;
}
/* 70% transparente */
.opacity-03 {
opacity: 0.3;
}
/* 80% transparente */
.opacity-02 {
opacity: 0.2;
}
/* 90% transparente */
.opacity-01 {
opacity: 0.1;
}
/* 100% transparente */
.opacity-0 {
opacity: 0;
}
Como ves, cada vez se desvanece más y más hasta acabar desapareciendo del todo. De hecho, he añadido también el ejemplo del «opacity 0″, pero en fin, que no se ve (por eso hay como un hueco justo encima de este texto).
Puedes Ser Todavía Más Preciso: Valores con más Decimales
Comentar esto simplemente para que no creas que solo puedes usar valores de un solo decimal, puedes usar «los que quieras» (tendrá su límite, pero más de 2 decimales no tiene demasiado sentido en la amplia mayoría de casos).
Para que lo veas, te mostraré un ejemplo con las opacidades 0.07, 0.05, 0.03 y 0.01 (serán casi imperceptibles, pero estarán a la vista). Respecto al código, es lo mismo pero añadiendo los valores con los 2 decimales y ya:
.opacity-007 {
opacity: 0.07;
}
.opacity-005 {
opacity: 0.05;
}
.opacity-003 {
opacity: 0.03;
}
.opacity-001 {
opacity: 0.01;
}
Aumentar el brillo de la pantalla ayuda bastante a poder verlos bien. ¿Eres capaz de verlos todos? En mi caso sí, pero la verdad es que con el 0.01 tengo que forzar muchísimo la vista para llegar a verlo y eso teniendo la luz de mi portátil al máximo (y no sé si quizás en parte mi mente me ayuda al saber exactamente lo que allí pone).
Transparentar Solo el Fondo y no las Letras
Como ya habrás visto, opacity afecta a todo el elemento que seleccionas (ya sabes, con el selector CSS), pero.. ¿qué ocurre si quiero que solo el fondo o background de un elemento se transparente y que no afecte por lo tanto a lo demás (por ejemplo las letras)? Pues por suerte es posible de este modo:
.bg-transparente {
background: rgba(3, 174, 243, 0.1);
}
De nuevo te pondré primero un bloque sin el código y otro con el código para que veas mejor la comparación (le añado mucha transparencia para que veas que no afecta en nada a las letras):
No tiene ningún misterio, hemos añadido un color en base RGBA. Es más común usar códigos en hexadecimal, pero en el caso de los colores con transparencias a mi me parece bastante más cómodo usar RGBA en su lugar por ser bastante más visible y fácil de entender.
RGBA es como RGB (que añades los 3 valores de rojo, verde y azul), pero esa A extra se la conoce como Alpha (a en griego) y es la que define la opacidad del elemento (con los mismos valores que opacity, valores entre 0 y 1, incluidos estos).
He usado exactamente el mismo color azul que en los ejemplos anteriores pero pasado a RGB y añadiendo ese «0.1» en el cuarto valor del paréntesis para indicarle una opacidad de 0.1, que es lo mismo que una transparencia de 0.9.
Podría explicarte más a fondo cómo funciona todo esto de los códigos en RGB, Hexadecimal y demás, pero sería mejor hacer un post dedicado a ello. Quizás un día lo haga.
El caso, que eso sería todo por hoy… como te comentaba, crear transparencias es bastante sencillo en CSS si sabes cómo hacerlo y además es bastante importante conocer el truco de conseguir que solo el background de un elemento se transparente (ya verás como algún día tendrás que usarlo y te acordarás). Como siempre, ya sabes, cualquier duda o sugerencia me dejas un comentario. ¡Hasta otra!
Más información aquí.
Otros Posts que Pueden Interesarte:
- Cómo Crear Textos con Degradado en CSS
- Cómo Convertir Texto en Mayúsculas o Minúsculas en CSS
- Cómo Crear Contenedores con Efecto de Neón en CSS
- Cómo Quitar el Punto y Crear Listas Elegantes en CSS
- Cómo Crear Degradados (Gradients) en CSS
- Cómo Personalizar los HR con CSS
- Cómo Dominar el Display Grid en CSS
