Jugar con la transparencia y opacidad de un elemento gráfico puede ser realmente útil para crear contraste visual o para reforzar la imagen de una marca a la hora de diseñar un sitio web.
Por ejemplo, la página de Bellavista Building Group utiliza fondos transparentes con un texto superpuesto para reflejar los valores de su marca, los cuales incluyen la transparencia, la integridad y la responsabilidad.
Así como el desplazamiento horizontal, las texturas visuales y muchas otras técnicas de diseño web, la opacidad y la transparencia deben emplearse únicamente de manera ocasional y siempre de forma planeada. A continuación hablaremos de cómo puedes incluir estos efectos en tu código en el diseño de tu sitio web para los siguientes elementos:
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para CSS](https://no-cache.hubspot.com/cta/default/53/8cbe9b74-0404-40c9-b34f-cbee306c4f8e.png){kind=small}
Cómo ajustar la opacidad en CSS
Para ajustar la opacidad (y la transparencia) de un fondo, de una imagen, de un texto o de cualquier otro elemento puedes usar la propiedad opacity de CSS. Los valores de esta propiedad van del 0 al 1. Si estableces un valor de 0 el elemento seleccionado será completamente transparente y, por tanto, invisible. Si ajustas el valor a 1 el elemento será completamente opaco.
Veamos un ejemplo con el mismo elemento de color naranja cuya opacidad ha sido modificada con diferentes valores. El primer cuadro tiene un valor de opacidad 1. Al último cuadro se le ha asignado un valor 0 y es completamente transparente, por lo que no puedes verlo. Los bloques intermedios tienen otros valores intermedios.
Este es el código que hemos utilizado:
Otra manera de ajustar la opacidad de un elemento es usando valores de color en RGBA. Hablaremos más de este método a continuación.
Cómo ajustar la opacidad de fondos en CSS
En CSS es muy fácil ajustar la opacidad de un elemento para hacerlo más o menos transparente. Pero es importante que tomes en consideración que al editar el valor de un bloque no solo modificarás el aspecto del elemento en cuestión, sino también el de todos los elementos internos.
En otras palabras, si modificas el valor de opacidad de un bloque div que contiene texto, tanto el bloque como el texto cambiarán su aspecto. Esto puede hacer que el texto sea difícil de leer, como en el siguiente ejemplo.
Por el contrario, si lo que quieres es modificar la opacidad de un elemento sin alterar sus elementos internos necesitarás hacer uso de la propiedad abreviada de fondo en CSS y códigos de color RGBA.
Los códigos de color RGBA son una de las mejores alternativas para modificar el color de un texto o el color de un fondo en páginas web que utilizan CSS. Aunque existen algunas opciones en HTML para cumplir con esta y otras tareas, lo que hace único al modelo de color RGBA es que con él puedes controlar el color de un elemento y la opacidad de ese color al mismo tiempo.
Para hacerlo únicamente hace falta que agregues una «a» al prefijo rgb() y que agregues cuatro valores dentro del paréntesis. Los primeros tres números representan la intensidad del respectivo color primario («r» para rojo, «g» para verde y «b» para azul) como un número entero en la escala del 0 al 255. El cuarto valor, correspondiente a «a», va del 0 al 1 y sirve para establecer la transparencia del color. Recuerda: 0 lo hará completamente transparente y 1 completamente opaco.
Utilicemos el ejemplo anterior con la propiedad de fondo, o background, y el código de color RGBA.
Si quieres aprender más acerca de esto y sobre otros modelos de color te recomendamos familiarizarte con valores en HTML, Hex, RGB y HSL.
Cómo ajustar la opacidad de textos en CSS
El proceso para ajustar la opacidad de textos en CSS es casi idéntico al que hemos empleado para establecer la opacidad del fondo de un elemento.
Recuerda que al utilizar el elemento opacity modificarás la opacidad de fondos, textos, márgenes o cualquier otro elemento dentro de un bloque div. Para únicamente modificar la opacidad de un texto necesitarás utilizar, por el contrario, la propiedad de color CSS y los códigos de color RGBA. En el cuadro de abajo te presentamos un párrafo que ha sido editado para ser más transparente respecto a un fondo negro.
Al ajustar la opacidad de un texto, asegúrate de mantener un buen contraste para que todos los usuarios —incluyendo a aquellos con alguna discapacidad visual— puedan ver y leer el contenido. Las Pautas de Accesibilidad para el Contenido Web (conocidas como WCAG por sus siglas en inglés) han establecido que es necesaria una relación de 4.5:1 para textos normales y una de 3:1 en textos con letras grandes, para los títulos. Los textos grandes deben ser de 18.66 píxeles o más y en formato de negritas, o bien en un largo de 24 píxeles (esto significa que debe ser de un tamaño de tipografía 14 en negritas o 18 en formato estándar).
Cómo ajustar la opacidad de bordes en CSS
Ajustar la opacidad de un margen en CSS es tan sencillo como hacerlo para un texto. Si lo que quieres es modificar el borde de un elemento solo deberás usar nuevamente la propiedad abreviada de fondo de CSS y valores de color en RGBA.
A continuación verás un ejemplo de cómo se puede definir un color oscuro para el borde de un elemento div con una transparencia alta, que da como resultado un efecto de sombra.
Cómo ajustar la opacidad de imágenes en CSS
Así como con otros elementos, en CSS también puedes modificar la opacidad de una imagen. Este efecto, obtenido con la propiedad opacity, es utilizado comúnmente en compañía de la función :hover. Su combinación hace que la imagen se haga más transparente en el momento en que el usuario desplaza su cursor sobre ella. Para lograr este efecto tienes dos opciones.
En la primera alternativa puedes hacer que una imagen se haga más transparente en el momento que el usuario se desplace sobre ella y que regrese a su aspecto inicial al alejar el cursor. Otra opción es que la imagen sea más transparente y se vuelva opaca al interactuar con ella.
En el ejemplo que te presentamos puedes ver tres imágenes. La primera tiene una transparencia de 40 % (representado con el decimal 0.4) sin importar si el usuario se desplaza sobre ella o no. A la segunda se le ha definido una transparencia de 40 % solo cuando el usuario se desplaza sobre ella. El último está codificado para tener un 40 % de transparencia y cambiar a un 100 % de opacidad cuando el usuario se desplaza sobre ella.
Puedes combinar la propiedad de opacidad con algunas otras para animar tus elementos o crear transiciones de desvanecimiento de imágenes.
Cómo ajustar la opacidad de gradientes en CSS
Con CSS también puedes crear gradientes de color para crear efectos de degradado que vayan de izquierda a derecha, de arriba abajo o, incluso, en diagonal con diferentes tonalidades. Este efecto únicamente funciona para modificar un mismo color y hacer que vaya de mayor a menor opacidad; pero si lo que quieres hacer es crear transiciones entre colores probablemente esta no es la herramienta indicada.
No puedes crear estos gradientes con la propiedad de opacidad de CSS. En lugar de esto, deberás emplear la propiedad de fondo y aplicar valores de RGBA. El proceso para lograrlo es muy parecido al cambio de opacidad de un fondo, pero en lugar de definir la propiedad de fondo con un único set de valores de color RGBA deberás utilizar la propiedad linear-gradient y un set adicional de color RGBA. Además deberás definir hacia qué lado se dirigirá el degradado dentro de un paréntesis. Veamos un ejemplo:
Cómo ajustar la opacidad de color en CSS
En este artículo hemos revisado algunos métodos para cambiar la opacidad de color en CSS. Nos hemos centrado principalmente en la propiedad opacity y en el uso del modelo de color RGBA. Sin embargo existe otra forma de controlar la opacidad de color en CSS: con colores HSL.
HSLA es un sistema de color que te permite especificar no solo el tono, sino también la saturación, luminosidad y transparencia de un color.
Este formato es similar a los códigos de color RGBA: está compuesto por tres números separados por comas dentro de un paréntesis. La diferencia es que estos valores son precedidos por el llamado hsl en lugar de rgb. Al momento de agregar una «a» a hsl añades un cuarto valor que deberás definir entre 0 y 1 y que corresponde a la transparencia que quieres asignar al color.
Mientras que los primeros tres números del código de color RGB representan la intensidad del color primario respectivo, los primeros tres números del código de color HSL representan el tono («h»), la saturación («s») y la luminosidad («l») del color. El tono se mide en una escala que va del 0 al 360; 360 corresponde al color rojo, 120 al verde y 240 al azul. Por otro lado, la iluminación y la saturación se miden en una escala porcentual del 0 al 100. Una saturación definida en 0 % da como resultado un tono grisáceo, mientras que al ser determinada en 100 % da como resultado un color brillante. En el caso de la luminosidad, 0 % es negro y 100 % es blanco.
En el ejemplo que te presentamos a continuación hemos establecido el color de un bloque div sin definir un parámetro para «a». Como resultado obtuvimos un color opaco. Si añadimos un valor de .5 para la transparencia, como en el segundo bloque, obtendremos una diferente tonalidad.
Como puedes ver, el texto que está sobre el fondo no se afectó al modificar los valores, por lo que es fácil de leer. Puedes utilizar valores HSLA en lugar de valores RGBA en todos los ejemplos anteriores y verás que obtienes los mismos resultados.
Si quieres crear contraste en los elementos de tu sitio web para hacer que tu texto sobresalga puedes utilizar la propiedad de opacidad en CSS —o recurrir a valores de color en RGBA o HSLA— y controlar la opacidad de los elementos de tu página. Bastará con que estés familiarizado con HTML y CSS para que logres este objetivo.
