Logo Code Cats Studio

Opacidad y efectos visuales

Controla la opacidad sin afectar descendientes y añade sombras, transformaciones y transiciones suaves.

3. Opacidad y efectos visuales

Verás la diferencia entre aplicar opacity en un contenedor (afecta a hijos) y usar colores semitransparentes como rgba()/hsla() o combinaciones con color-mix() que no afectan el texto interno. Luego practicaremos sombras, transformaciones y transiciones para microinteracciones.

3.1 Opacidad (opacity)

Diferencias clave

  • opacity en el contenedor: reduce la opacidad de TODO el elemento, incluidos sus hijos (texto, imágenes, etc.).
  • rgba()/hsla(): solo afecta el color aplicado (fondo/borde), el texto dentro mantiene su opacidad normal.
  • Overlay: capa semitransparente superpuesta para oscurecer sin tocar el contenido.
Contenedor con opacity: 0.5

El texto también se ve desvanecido.

Fondo con rgba()

El fondo es semitransparente, pero el texto conserva su opacidad.

Overlay (capa)

Oscurecemos con una capa sin afectar el texto.

/* Evita opacity en contenedor si no quieres afectar hijos */
.caja { /* opacity: .5;  // Esto desvanecerá también el texto */ }

/* Usa rgba()/hsla() para fondos */
.fondo { background: rgba(0, 0, 0, .35); }

/* Overlay superpuesto */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.25); }

3.2 Sombras y transformaciones

Resumen

  • box-shadow: offset-x, offset-y, blur, spread, color. Permite múltiples sombras separadas por comas.
  • text-shadow: aplica a texto; útil para contraste sutil.
  • transform: scale, rotate, translate.
  • transition: suaviza cambios de propiedades.

Tarjeta con hover: elevar + translateY(-4px) + transición.

Título de tarjeta

Al pasar el mouse, la tarjeta se eleva con una sombra más profunda.

Acción 
.card {
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

Variaciones de box-shadow y text-shadow

Texto con text-shadow sutil

/* Suave */
box-shadow: 0 2px 6px rgba(0,0,0,.25);

/* Más profunda */
box-shadow: 0 12px 20px rgba(0,0,0,.35);

/* Múltiples sombras */
box-shadow: 0 6px 12px rgba(0,0,0,.3),
            0 0 0 2px rgba(255,255,255,.08) inset;

/* Text-shadow */
text-shadow: 0 1px 2px rgba(0,0,0,.5);

Botón con microinteracción: scale(0.98) en active.

Click aquí 
.btn:active {
  transform: scale(.98);
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
}

Micropráctica

Aplica un hover suave a una tarjeta o botón:

Tarjeta práctica

Pasa el mouse para ver el efecto.

.tarjeta {
  background: var(--bg-light);
  border: 1px solid rgba(255,255,255,.15);
  transition: var(--transition);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.38);
}
Botón práctico 
.boton {
  background: var(--primary); color:#fff;
  border-radius: 12px; padding: .7rem 1rem;
  transition: var(--transition);
}
.boton:hover { background: var(--accent); color: var(--primary); }
.boton:active { transform: scale(.98); }

Checklist de comprensión