Utilidades · Profundidad

Shadow (sombras)

Aplica profundidad a cajas, imágenes recortadas y texto mediante clases completas, listas para usar y con cinco intensidades.

v2.0

Cajas

.shadow-box-* usa box-shadow sobre el rectángulo completo.

Imágenes

.shadow-img-* usa drop-shadow() y respeta transparencias.

Texto

.shadow-text-* dibuja la sombra directamente sobre los caracteres.

Código + resultado

Elige la familia según el contenido

El HTML mostrado es el mismo que produce cada resultado aplicado.

<article class="shadow-box-m">
  Tarjeta con sombra
</article>

Tarjeta con sombra

.shadow-box-m aplica una sombra media al perímetro rectangular de la tarjeta.

<img class="shadow-img-m"
  src="../assets/img/Logo-Quickly.png"
  alt="Logo de QuicklyCSS">

.shadow-img-m usa drop-shadow(); en recursos transparentes sigue la silueta visible y no la caja del archivo.

<h3 class="shadow-text-m">
  Texto con sombra
</h3>

Texto con sombra

.shadow-text-m aplica la sombra a los glifos. No agrega profundidad al contenedor del título.

Escalas

Cinco intensidades por familia

Los sufijos xs, s, m, l y xl aumentan la presencia visual. Todas las intensidades usan sombras negras; sólo cambian la opacidad, el desplazamiento y el desenfoque.

Cajas · `.shadow-box-*`

.shadow-box-xsExtra sutil

.shadow-box-sSutil

.shadow-box-mMedia

.shadow-box-lAlta

.shadow-box-xlMáxima

Imágenes · `.shadow-img-*`

.shadow-img-xsExtra sutil

.shadow-img-sSutil

.shadow-img-mMedia

.shadow-img-lAlta

.shadow-img-xlMáxima

Texto · `.shadow-text-*`

.shadow-text-xsExtra sutil

.shadow-text-sSutil

.shadow-text-mMedia

.shadow-text-lAlta

.shadow-text-xlMáxima

Paleta neutral

Una paleta neutral

Las sombras de profundidad usan negro con distintas opacidades. El contorno claro utiliza el gris neutral 400 para separar texto blanco de fondos claros.

rgba(0, 0, 0, α)

Negro

Color de todas las sombras de cajas, imágenes y texto. La transparencia cambia según la intensidad.

var(--qy-gray-400)

Gris claro

Se utiliza en .shadow-text-outline-light para producir un contorno leve alrededor del texto blanco.

Profundidad oscura, contorno neutralLas sombras de cajas, imágenes y texto permanecen negras; únicamente el contorno leve utiliza gris neutral.

Variantes especiales

Dirección para imágenes y contorno para texto

Estas utilidades no forman parte de la escala de cinco tamaños: resuelven contextos específicos.

.shadow-img-left

Proyección izquierda

Desplaza la sombra hacia la izquierda y abajo para una imagen flotante.

.shadow-img-right

Proyección derecha

Desplaza la sombra hacia la derecha y abajo para equilibrar la composición.

Texto claro

.shadow-text-outline-dark + .color-white

Contorno negro

Combina el contorno negro con texto blanco sobre un fondo gris neutro.

Texto blanco

.shadow-text-outline-light + .color-white

Contorno gris leve

Combina texto blanco con un contorno gris neutral 400 para separarlo suavemente del fondo.

Variantes responsive

El breakpoint se agrega al final

La forma es .shadow-{familia}-{tamaño}-{breakpoint}. En este módulo los media queries usan max-width, por lo que la clase se activa hasta el ancho indicado.

640pxmax-width.shadow-box-m-640

768pxmax-width.shadow-box-m-768

1280pxmax-width.shadow-box-m-1280

1536pxmax-width.shadow-box-m-1536

2560pxmax-width.shadow-box-m-2560

3840pxmax-width.shadow-box-m-3840

6016pxmax-width.shadow-box-m-6016

También disponibleCambia box por img o text, y utiliza cualquiera de los tamaños xs, s, m, l o xl. El reset sigue la forma .shadow-none-{breakpoint}.

Referencia

Clases disponibles

La tabla resume las familias reales definidas por el módulo.

Clases	Propiedad	Color	Función	Ejemplo
`.shadow-box-{xs…xl}`	`box-shadow`	Negro	Sombra rectangular para cajas y componentes.	`.shadow-box-m`
`.shadow-img-{xs…xl}`	`filter: drop-shadow()`	Negro	Sombra que sigue la transparencia del recurso.	`.shadow-img-l`
`.shadow-img-left`, `.shadow-img-right`	`filter: drop-shadow()`	Negro	Proyección lateral fija para imágenes.	`.shadow-img-right`
`.shadow-text-{xs…xl}`	`text-shadow`	Negro	Sombra oscura aplicada a los caracteres.	`.shadow-text-xl`
`.shadow-text-outline-dark`	`text-shadow`	Negro	Trazo negro alrededor del texto.	Texto claro sobre fotografía.
`.shadow-text-outline-light`	`text-shadow`	Gris neutral 400	Trazo gris leve alrededor del texto.	Texto blanco sobre fondos claros.
`.shadow-none`	Reset	—	Elimina box-shadow, filter y text-shadow.	Restaurar el estado sin sombra.
`.shadow-{familia}-{tamaño}-{bp}`	Responsive	Oscuro	Aplica la variante hasta el breakpoint indicado.	`.shadow-box-m-768`

Recomendaciones

Buenas prácticas de shadow

Usa la familia correcta

Una imagen transparente necesita shadow-img; una tarjeta rectangular necesita shadow-box.

Reserva los extremos

Usa l y xl sólo cuando la jerarquía realmente requiera mucha profundidad.

Mantén coherencia

No mezcles direcciones e intensidades arbitrarias dentro de una misma familia de componentes.

Comprueba contraste

Los glows y contornos ayudan a leer, pero no reemplazan una combinación accesible de texto y fondo.