La opacidad, y su opuesto, la transparencia, se pueden utilizar en el diseño web para crear contraste y mejorar la identidad de la marca. Por ejemplo, la página de inicio de Bellavista Building Group tiene una imagen de fondo ligeramente transparente con una superposición de texto. Esta técnica de diseño refleja los valores de la marca que incluyen tanto la transparencia como la honestidad y la responsabilidad.
Al igual que el desplazamiento horizontal, las texturas web y muchas otras técnicas de diseño web, es mejor usar la opacidad y la transparencia con moderación y a propósito. A continuación, discutiremos cómo controlar la opacidad de varios elementos, que incluyen:
Cómo establecer la opacidad en CSS
Para establecer la opacidad de un fondo, imagen, texto u otro elemento, puede usar la propiedad de opacidad de CSS. Los valores de esta propiedad oscilan entre 0 y 1. Si establece la propiedad en 0, el elemento con estilo será completamente transparente (es decir, invisible). Si establece la propiedad en 1, el elemento será completamente opaco.
Por ejemplo, observemos el mismo elemento div que tiene un estilo diferente con una propiedad de opacidad. Se supone que el primer div es completamente opaco. Se supone que este último es completamente transparente, por lo tanto, no puede verlo. Los elementos div intermedios se establecen en diversos grados de transparencia.
Aquí está el código:
ver la pluma Cómo establecer la opacidad en CSS de Christina Perricone (@hubspot) en CódigoPen.
Otra forma de establecer la opacidad de un elemento es usar valores de color RGBA. Echaremos un vistazo a este método a continuación.
Opacidad de fondo CSS
Puede usar la propiedad de opacidad de CSS para hacer que el fondo de un elemento sea más transparente (o menos). Pero cuidado: la propiedad de opacidad no solo hace que el elemento con estilo sea transparente, sino también sus elementos secundarios.
En otras palabras, si le doy estilo a un div que contiene texto con opacidad, tanto el div como el texto en el div serán transparentes. Esto puede hacer que el texto sea muy difícil de leer, como en el siguiente ejemplo.
ver la pluma Establecer la opacidad del fondo con la propiedad CSS Opacity de Christina Perricone (@hubspot) en CódigoPen.
Si desea establecer la opacidad de un elemento sin afectar a sus elementos secundarios, debe usar la propiedad de abreviatura de fondo CSS y los valores de color RGBA en su lugar.
Los códigos de color RGB son una forma de cambiar el color del texto o el color de fondo de una página web en CSS. Además de los otros modelos de color, también hay nombres de color HTML y códigos de color hexadecimales. Una característica única del modelo de color RGB es que puede controlar el color de un elemento y la opacidad de este color.
Para hacer esto, solo agregue una «a» al prefijo rgb () y agregue los cuatro valores entre paréntesis. Los primeros tres números representan la intensidad del color base correspondiente (reducar, bazul, gramoreen) como un número entero entre 0 y 255. El cuarto valor, entre 0 y 1, establece la transparencia del color. 0 es completamente transparente y 1 es completamente opaco.
Reescribamos el ejemplo anterior usando las propiedades de fondo y el código de color RGBA.
ver la pluma Establece la opacidad del fondo usando el código de color RGBA de Christina Perricone (@hubspot) en CódigoPen.
Para obtener más información sobre este y otros modelos de color, consulte Colores CSS: lo que necesita saber sobre los valores de color HTML, hexadecimal, RGB y HSL.
Opacidad del texto CSS
Establecer la opacidad del texto en CSS es casi idéntico a establecer la opacidad del fondo de un elemento. Puede establecer la opacidad de todo el elemento (fondo, texto del elemento, borde y todo lo demás) utilizando la propiedad de opacidad.
Para establecer la opacidad del texto y solo del texto, debe usar las propiedades de color CSS y los valores de color RGBA. A continuación, configuraré un párrafo ligeramente transparente sobre un color de fondo sólido oscuro.
ver la pluma Opacidad del texto CSS de Christina Perricone (@hubspot) en CódigoPen.
Al ajustar la opacidad del texto, asegúrese de mantener la relación de contraste de color para que todos los usuarios, incluidas las personas con discapacidades visuales, puedan ver y leer el texto. Actual Directrices de accesibilidad al contenido web (WCAG) requieren una relación de aspecto de 4,5: 1 para texto sin formato y una relación de aspecto de 3: 1 para texto grande, como encabezados. El texto grande se define como 18,66 píxeles i audaz o mayor o 24 píxeles. o más grande El texto grande se define como texto en negrita que tiene al menos 14 puntos de largo o texto que tiene 18 puntos de largo.
Para obtener más información sobre la disponibilidad de colores, consulte ¿Cómo puedo reconocer los colores de los productos y sitios web disponibles en Internet?.
Opacidad del borde CSS
Establecer la opacidad de un borde en CSS es como establecer la opacidad del texto. Si desea hacer que el borde de un elemento sea opaco y nada más, debe usar la propiedad de acceso directo del borde CSS y los valores de color RGBA.
A continuación, configuraré el borde del div para que sea negro y muy transparente para proporcionar un efecto de sombra.
ver la pluma BaWwYVw de Christina Perricone (@hubspot) en CódigoPen.
Opacidad de imagen en CSS
También puede establecer la opacidad de la imagen en CSS. La propiedad de opacidad se usa a menudo con el selector flotante para estilizar la imagen. De esta manera, la opacidad de la imagen solo cambiará cuando el usuario se desplace sobre ella. Tienes dos opciones.
Puede hacer que la imagen sea transparente cuando el usuario pasa el cursor sobre ella y luego se vuelve opaca cuando el mouse se aleja. Esto se llama un efecto de desplazamiento transparente. O bien, puede hacer que la imagen sea ligeramente transparente y luego volverse opaca cuando el usuario pasa el cursor sobre ella. Esto se llama el efecto de desplazamiento transparente invertido.
En el siguiente ejemplo, verá tres imágenes. Se supone que uno es 40% transparente, ya sea que el usuario pase el mouse sobre él o no. Uno se establece en un 40 % de transparencia solo cuando el usuario pasa el cursor sobre él. Uno se establece en 40 % transparente y luego se vuelve 100 % opaco cuando el usuario pasa el mouse sobre él.
ver la pluma Opacidad de imagen CSS [With Examples On Hover] de Christina Perricone (@hubspot) en CódigoPen.
También puede combinar la propiedad de opacidad con una propiedad de animación o transición para crear una transición de imagen CSS.
Gradiente opaco CSS
En CSS, puede crear un degradado de color que muestre que un color cambia gradualmente a otro en una dirección específica, como de arriba a abajo, de izquierda a derecha o en diagonal. En lugar de cambiar de un color a otro (piense: de rojo a azul), el degradado puede mostrar un color que cambia gradualmente de completamente opaco a completamente transparente.
No puede usar la propiedad de opacidad de CSS para crear este tipo de degradado. En su lugar, utilizará las propiedades de fondo y los valores de color RGBA. El proceso es similar a cambiar la opacidad de un fondo, pero en lugar de definir una propiedad de fondo con un conjunto de valores de color RGBA, establecerá la propiedad en un «gradiente lineal». Luego especifique la dirección del degradado y al menos dos puntos de color entre paréntesis. A continuación se muestra un ejemplo.
ver la pluma bGqoLmL de Christina Perricone (@hubspot) en CódigoPen.
Opacidad de color CSS
Ya hemos visto algunas formas de cambiar la opacidad del color en CSS. Nos enfocamos principalmente en la opacidad y el modelo de color RGBA. Sin embargo, existe otra forma de controlar la opacidad de un color en CSS: los colores HSL.
HSLA es un sistema de color que le permite especificar el tono, la saturación y el brillo, así como la transparencia de un color.
HSLA tiene un formato similar a los códigos de color RGBA. Consta de tres números separados por comas. Luego, estos números se colocan entre paréntesis y están precedidos por una «hsl» minúscula. Puede agregar «a» a «hsl» y un cuarto valor entre 0 y 1 para establecer la transparencia del color.
Mientras que los primeros tres dígitos de los códigos de color RGB representan la intensidad del color base correspondiente, los primeros tres dígitos de los códigos de color HSL representan el matiz, la saturación y la luminosidad. El tono se mide en grados en una escala de 0 a 360. Establecer el tono en 0 o 360 es rojo, 120 es verde y 240 es azul. La saturación y el brillo se miden como un porcentaje en una escala de 0 a 100. La saturación establecida en 0 % es una sombra de gris y 100 % es un color completo. El brillo establecido en 0% es negro y el 100% es blanco.
En el siguiente ejemplo, configuré el color de un div pero no agregué el parámetro alfa. Como resultado, es completamente opaco por defecto. Establecí el color y la opacidad del segundo div para que sea 50% transparente.
ver la pluma Establecer la opacidad del color CSS con colores HSL de Christina Perricone (@hubspot) en CódigoPen.
Tenga en cuenta que el texto contenido en el div no cambia, por lo que es fácil de leer. Por lo tanto, puede cambiar los valores RGBA utilizados en cualquiera de los ejemplos anteriores por los valores HSLA correspondientes y lograr el mismo resultado.
Transparencia de codificación
Si desea crear contraste y hacer que el texto de su sitio sea visible, puede usar la propiedad de opacidad CSS, o los valores de color RGBA o HSLA, para controlar la transparencia de diferentes elementos en la página. Solo necesitas saber un poco de HTML y CSS.
