Si alguna vez te has preguntado cómo crear efectos visuales impresionantes en tu sitio web, la propiedad opacity en CSS es una herramienta que no puedes pasar por alto. En este artículo, te vamos a enseñar todo lo que necesitas saber sobre opacity en CSS, desde los conceptos básicos hasta ejemplos prácticos que podrás aplicar de inmediato.

¿Qué encontrarás en este post?

¿Qué es opacity en CSS?

La propiedad opacity en CSS establece la opacidad de un elemento. En términos simples, la opacidad es el grado en el que el contenido detrás de un elemento es oculto, siendo el opuesto de la transparencia. Al ajustar la opacidad, puedes controlar cuán visible o invisible es un elemento en tu página web.

Sintaxis de opacity en CSS

La sintaxis para utilizar opacity en CSS es bastante sencilla. Puedes definir la opacidad de un elemento con un valor numérico entre 0.0 y 1.0, o un porcentaje entre 0% y 100%. Aquí tienes un ejemplo:

opacity: 0.5; /* Opacidad del 50% */
opacity: 50%; /* Otra forma de escribir lo mismo */

Valores globales

La propiedad opacity en CSS acepta varios valores globales que permiten un control más avanzado sobre cómo se aplica la opacidad en relación con las propiedades heredadas y los valores iniciales de los elementos. Veamos:

inherit: Este valor indica que el elemento debe tomar la misma opacidad que su elemento padre. Por ejemplo, si el padre tiene una opacidad del 0.5, el elemento hijo también tendrá una opacidad del 0.5.css
initial: Establece la opacidad del elemento al valor inicial de la propiedad, que en el caso de opacity es 1 (totalmente opaco). Este valor es útil para restablecer la opacidad a su valor por defecto.
revert: Restablece la propiedad al valor de cascada de la propiedad en función de la hoja de estilos del usuario o la hoja de estilos del agente de usuario (navegador), como si no hubiera una declaración específica del autor.
revert-layer: Similar a revert, pero aplicado dentro del contexto de capas de origen (como capas de origen de estilo, capas de origen de autor, etc.), que es una característica más avanzada y específica.
unset: Este valor actúa como inherit si la propiedad es heredable (como es el caso de opacity), y como initial si no lo es. Es una forma de garantizar que el valor se ajuste adecuadamente dependiendo del contexto de herencia.

¿Cómo funciona opacity?

La propiedad opacity se aplica al elemento completo, incluyendo su contenido. Esto significa que tanto el elemento como sus hijos tendrán la misma opacidad relativa al fondo del elemento. Es importante tener en cuenta que la opacidad no se hereda por los elementos hijos, por lo que cada uno puede tener su propio nivel de transparencia. Por ejemplo, si estableces opacity: 0.5 en un contenedor, todos sus elementos internos también se verán al 50% de opacidad.

Para cambiar solo la opacidad del fondo, puedes usar propiedades como background con valores que permiten un canal alfa. Por ejemplo:

background: rgb(0 0 0 / 40%);

Cuando se establece el valor de opacidad en 0, el elemento y todos sus hijos serán invisibles, pero seguirán formando parte del DOM. Esto significa que aún pueden registrar eventos de puntero y, si los elementos están en un orden de tabulación, pueden recibir enfoque. Para mejorar la usabilidad, asegúrate de hacer visibles estos elementos cuando reciban interacciones del usuario o usa la propiedad pointer-events para deshabilitar los eventos de puntero y sacar el elemento del orden de tabulación estableciendo tab-index="-1" para elementos interactivos no relacionados con formularios.

Además, al usar opacity con un valor diferente de 1, el elemento se coloca en un nuevo contexto de apilamiento, lo que puede afectar la disposición visual de otros elementos en la página. Esto es útil para crear efectos visuales complejos y asegurar que los elementos se rendericen en el orden deseado.

Ejemplos prácticos de uso de opacity

Establecer diferentes niveles de opacidad

Aquí tienes un ejemplo de cómo puedes aplicar diferentes niveles de opacidad a varios elementos:

<div class="light">Este texto es casi invisible.</div>
<div class="medium">Este texto es más visible.</div>
<div class="heavy">Este texto es muy visible.</div>

div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /* Apenas visible */
}
.medium {
  opacity: 0.5; /* Moderadamente visible */
}
.heavy {
  opacity: 0.9; /* Muy visible */
}

Cambiar la opacidad en hover

Puedes hacer que un elemento cambie su opacidad cuando el usuario pase el ratón sobre él:

<div class="wrapper">
  <img src="imagen.jpg" alt="Ejemplo" class="opacity" />
</div>

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(90deg, transparent 50%, rgb(255 255 255 / 50%) 50%);
  background-size: 20px 20px;
}

Establecer opacidad basada en preferencias del usuario

CSS también te permite ajustar la opacidad de acuerdo con las preferencias del usuario, utilizando la consulta de medios prefers-reduced-transparency:

.element {
  opacity: 0.5;
}

@media (prefers-reduced-transparency) {
  .element {
    opacity: 1;
  }
}

Consejos y mejores prácticas para usar opacity en CSS

Accesibilidad: Asegúrate de que el contraste entre el texto y el fondo sea suficiente para que el contenido sea legible para todos los usuarios. Utiliza herramientas como WebAIM: Color Contrastse Checker para verificar el contraste.
Compatibilidad: Verifica que la propiedad opacity funcione correctamente en todos los navegadores que necesitas soportar.
Usabilidad: Si un elemento invisible aún necesita ser accesible, considera usar propiedades como pointer-events o tab-index.

Ejemplo avanzado: Transiciones de opacidad

Las transiciones pueden hacer que los cambios de opacidad sean más suaves y agradables a la vista. Aquí tienes un ejemplo de cómo implementar una transición de opacidad:

//opacity en CSS
<div class="card">Contenido de la tarjeta</div>

//opacity en CSS
.card {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

.card.hidden {
  opacity: 0;
}

Con este código, la opacidad de .card cambiará suavemente cuando se le agregue o quite la clase .hidden de las clases en CSS.

Si quieres profundizar en el uso de propiedades como opacity en CSS, selectores básicos en CSS, atributos en CSS y otras técnicas avanzadas de diseño web, te invitamos a unirte a nuestro Bootcamp en Desarrollo Web. En KeepCoding, no solo aprenderás los fundamentos del desarrollo web, sino que también adquirirás habilidades prácticas que te prepararán para una carrera exitosa en el sector tecnológico. ¡No pierdas la oportunidad de transformar tu vida y asegurar tu futuro en una industria en constante crecimiento!