Tutorial CSS: Sombras en texto y cajas

Sintaxis de box-shadow y parámetros de configuración

Las sombras son un elemento fundamental en el diseño web moderno que añaden profundidad y dimensión a los elementos de una página. La propiedad box-shadow en CSS nos permite crear estos efectos de sombra alrededor de cajas o elementos HTML de manera sencilla y controlada.

La sintaxis básica de box-shadow incluye varios parámetros que determinan cómo se verá la sombra. Vamos a explorar cada uno de ellos para entender cómo funcionan y cómo podemos configurarlos.

Sintaxis básica

La estructura de la propiedad box-shadow sigue este patrón:

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

Veamos un ejemplo simple:

.card {
  width: 200px;
  height: 150px;
  background-color: white;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Este código crea una tarjeta con una sombra suave que se desplaza 5px a la derecha y 5px hacia abajo, con un desenfoque de 10px y un color negro semitransparente.

Parámetros de configuración

Analicemos cada uno de los parámetros que podemos configurar:

• offset-x: Define el desplazamiento horizontal de la sombra. Un valor positivo mueve la sombra hacia la derecha, mientras que un valor negativo la mueve hacia la izquierda.

• offset-y: Establece el desplazamiento vertical de la sombra. Un valor positivo mueve la sombra hacia abajo, mientras que un valor negativo la mueve hacia arriba.

/* Sombra hacia abajo y derecha */
.box-1 {
  box-shadow: 5px 5px 0 black;
}

/* Sombra hacia arriba e izquierda */
.box-2 {
  box-shadow: -5px -5px 0 black;
}

• blur-radius (opcional): Determina cuánto se desenfoca la sombra. Un valor mayor crea una sombra más difusa y suave. El valor predeterminado es 0 (sin desenfoque).

/* Sin desenfoque (sombra nítida) */
.sharp {
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
}

/* Con desenfoque suave */
.blurred {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* Con desenfoque intenso */
.very-blurred {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}

• spread-radius (opcional): Controla la expansión de la sombra. Un valor positivo aumenta el tamaño de la sombra, mientras que un valor negativo la contrae. El valor predeterminado es 0.

/* Sombra expandida */
.expanded {
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
}

/* Sombra contraída */
.contracted {
  box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.5);
}

• color: Define el color de la sombra. Puede especificarse usando cualquier formato de color válido en CSS (nombres de colores, hexadecimal, RGB, RGBA, HSL, HSLA). Usar valores con transparencia (RGBA o HSLA) suele dar resultados más naturales.

/* Sombra negra con 30% de opacidad */
.black-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Sombra azul con 50% de opacidad */
.blue-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 255, 0.5);
}

• inset (opcional): Por defecto, las sombras se proyectan hacia fuera del elemento. Al añadir la palabra clave inset, la sombra se dibuja dentro del elemento, creando un efecto de hundimiento o profundidad interior.

/* Sombra exterior (por defecto) */
.outer-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Sombra interior */
.inner-shadow {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Ejemplos prácticos

Veamos algunos ejemplos prácticos para entender mejor cómo combinar estos parámetros:

Tarjeta con sombra suave

.card {
  width: 250px;
  height: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Este ejemplo crea una tarjeta con una sombra sutil que da la sensación de que la tarjeta está ligeramente elevada sobre la superficie.

Botón con efecto de profundidad

.button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

En este caso, el botón tiene una sombra ligera que aumenta cuando el usuario pasa el cursor por encima, creando un efecto de elevación.

Elemento con apariencia hundida

.inset-element {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

Este ejemplo utiliza una sombra interior para crear la sensación de que el elemento está hundido o grabado en la superficie.

Casos de uso comunes

La propiedad box-shadow es extremadamente versátil y se utiliza en muchos contextos:

• Tarjetas y contenedores: Para dar sensación de elevación y separación del fondo.
• Botones: Para indicar estados (normal, hover, active) y mejorar la interactividad.
• Campos de formulario: Para destacar elementos cuando están enfocados.
• Modales y diálogos: Para crear una sensación de capa superior sobre el contenido principal.

/* Campo de formulario con efecto de foco */
.input-field {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 0.3s ease;
}

.input-field:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

Compatibilidad y prefijos

La propiedad box-shadow tiene buen soporte en todos los navegadores modernos. Sin embargo, para garantizar la compatibilidad con navegadores más antiguos, puedes utilizar prefijos de proveedor:

.compatible-box {
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

En la práctica actual, estos prefijos rara vez son necesarios, ya que la propiedad box-shadow es ampliamente compatible con los navegadores modernos.

Valores iniciales y heredados

Es importante conocer los valores por defecto de box-shadow:

• Valor inicial: none (sin sombra)
• La propiedad no se hereda de elementos padres
• Se puede aplicar a cualquier elemento que siga el modelo de caja

/* Restablecer una sombra a su valor inicial */
.no-shadow {
  box-shadow: none;
}

La propiedad box-shadow es una herramienta fundamental para añadir profundidad y dimensión a los elementos de una página web. Comprender sus parámetros y cómo configurarlos te permitirá crear efectos visuales atractivos y mejorar la experiencia de usuario en tus proyectos web.

Sombras múltiples y efectos de capas

Una de las características más versátiles de CSS es la capacidad de aplicar múltiples sombras a un mismo elemento. Esta técnica nos permite crear efectos visuales complejos y atractivos que añaden profundidad y dimensión a nuestros diseños web.

Para aplicar varias sombras a un elemento, simplemente debemos separar cada definición de sombra con una coma. CSS aplicará las sombras en el orden en que las declaremos, desde la primera (más cercana al elemento) hasta la última (más alejada).

.multi-shadow {
  box-shadow: 
    5px 5px 10px red,
    -5px -5px 10px blue;
}

En este ejemplo, el elemento tendrá dos sombras: una roja hacia abajo y a la derecha, y otra azul hacia arriba y a la izquierda.

Creando efectos de capas

Las sombras múltiples son perfectas para crear efectos de capas que simulan objetos físicos. Veamos algunos ejemplos prácticos:

Efecto de papel apilado

Este efecto simula varias hojas de papel apiladas una encima de otra:

.stacked-papers {
  width: 300px;
  height: 200px;
  background-color: white;
  border-radius: 2px;
  box-shadow: 
    0 1px 1px rgba(0, 0, 0, 0.15),
    0 2px 2px rgba(0, 0, 0, 0.15),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.15);
}

Este código crea cuatro sombras sutiles con diferentes tamaños y opacidades, dando la impresión de varias capas de papel.

Efecto neón

Las sombras múltiples son ideales para crear efectos de luz neón alrededor de texto o elementos:

.neon-effect {
  background-color: #000;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0ff,
    0 0 20px #0ff,
    0 0 25px #0ff;
}

Este ejemplo crea un resplandor blanco cercano al elemento que se desvanece en un tono azul cian, simulando el efecto de un letrero de neón.

Combinando sombras interiores y exteriores

Podemos combinar sombras inset (interiores) y exteriores para crear efectos aún más interesantes:

.inner-outer {
  width: 200px;
  height: 200px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.2),
    0 5px 15px rgba(0, 0, 0, 0.3);
}

Este código aplica una sombra interior sutil y una sombra exterior más pronunciada, creando un efecto de elemento con relieve que también está elevado sobre la superficie.

Efectos 3D con sombras múltiples

Las sombras múltiples son excelentes para crear efectos tridimensionales:

Botón 3D

.button-3d {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  box-shadow: 
    0 4px 0 #2E7D32,
    0 5px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
}

.button-3d:active {
  transform: translateY(4px);
  box-shadow: 
    0 0 0 #2E7D32,
    0 1px 3px rgba(0, 0, 0, 0.3);
}

Este ejemplo crea un botón con efecto 3D que parece hundirse cuando se hace clic en él. La primera sombra crea el "borde" inferior del botón, mientras que la segunda añade profundidad.

Tarjeta con efecto de elevación variable

.layered-card {
  width: 250px;
  height: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.layered-card:hover {
  box-shadow: 
    0 2px 2px rgba(0, 0, 0, 0.15),
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.15),
    0 16px 16px rgba(0, 0, 0, 0.15),
    0 32px 32px rgba(0, 0, 0, 0.15);
}

Este código crea una tarjeta con múltiples capas de sombras que aumentan su elevación al pasar el cursor por encima, creando un efecto de "levitación" suave y natural.

Efectos creativos con sombras múltiples

Las sombras múltiples permiten crear efectos visuales únicos que serían difíciles de lograr con otras técnicas:

Efecto de doble borde

.double-border {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 
    0 0 0 5px #3498db,
    0 0 0 10px #e74c3c;
}

Este ejemplo crea un círculo con dos "bordes" de diferentes colores utilizando sombras sin desplazamiento ni desenfoque.

Efecto de luz ambiental

.ambient-light {
  width: 300px;
  height: 200px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.19),
    0 6px 6px rgba(0, 0, 0, 0.23),
    inset 0 -5px 10px rgba(0, 0, 255, 0.05),
    inset 0 5px 10px rgba(255, 255, 0, 0.05);
}

Este código combina sombras exteriores para la elevación con sombras interiores sutilmente coloreadas que simulan reflejos de luz ambiental.

Consideraciones de rendimiento

Al trabajar con sombras múltiples, es importante tener en cuenta el rendimiento:

• Cada sombra adicional aumenta la carga de renderizado para el navegador.
• Las sombras con valores altos de desenfoque (blur-radius) son más exigentes para el procesador.
• En dispositivos móviles o de gama baja, demasiadas sombras complejas pueden afectar la fluidez de la página.

/* Versión optimizada para rendimiento */
.optimized {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Versión más compleja (potencialmente más costosa) */
.complex {
  box-shadow: 
    0 2px 2px rgba(0, 0, 0, 0.2),
    0 4px 4px rgba(0, 0, 0, 0.2),
    0 8px 8px rgba(0, 0, 0, 0.2),
    0 16px 16px rgba(0, 0, 0, 0.2);
}

Para elementos que aparecen frecuentemente en tu página, considera usar la versión más simple si el rendimiento es una preocupación.

Técnicas avanzadas

Sombras con degradado

Aunque CSS no permite directamente sombras con degradado, podemos simular este efecto usando múltiples sombras con colores diferentes:

.gradient-shadow {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 
    10px 10px 0 rgba(255, 0, 0, 0.5),
    20px 20px 0 rgba(0, 0, 255, 0.5);
}

Este ejemplo crea un efecto de sombra que parece cambiar de rojo a azul a medida que se aleja del elemento.

Efecto de recorte con sombras

Podemos crear efectos de "recorte" o "revelado" usando sombras múltiples:

.cutout-effect {
  width: 200px;
  height: 200px;
  background-color: #333;
  border-radius: 10px;
  box-shadow: 
    0 0 0 10px #333,
    0 0 0 11px white,
    10px 10px 30px rgba(0, 0, 0, 0.5);
}

Este código crea un elemento con un borde blanco fino que parece "recortado" del fondo, con una sombra que solo afecta al conjunto.

Las sombras múltiples son una herramienta increíblemente versátil en CSS que permite crear efectos visuales complejos y atractivos con código relativamente simple. Experimentar con diferentes combinaciones de sombras puede llevar a resultados únicos que mejoran significativamente la estética de tu diseño web.

Text-shadow para efectos en texto y legibilidad

La propiedad text-shadow es una herramienta fundamental en CSS que permite añadir sombras al texto, mejorando tanto su aspecto visual como su legibilidad en diferentes contextos. A diferencia de box-shadow que aplica sombras a elementos completos, text-shadow se enfoca específicamente en los caracteres del texto.

La sintaxis básica de text-shadow es similar pero más sencilla que la de box-shadow:

text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

Veamos un ejemplo simple:

h1 {
  color: #333;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

Este código crea un título con una sombra sutil que se desplaza 2px a la derecha y 2px hacia abajo, con un desenfoque de 3px y un color negro semitransparente.

Mejorando la legibilidad del texto

Uno de los usos más prácticos de text-shadow es mejorar la legibilidad del texto cuando se coloca sobre fondos complejos o imágenes:

Texto sobre imágenes

Cuando colocamos texto sobre imágenes, a menudo resulta difícil leerlo debido a la falta de contraste. La propiedad text-shadow puede solucionar este problema:

.hero-text {
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

Este ejemplo añade un halo oscuro alrededor del texto blanco, haciéndolo legible incluso sobre áreas claras de una imagen.

Para textos sobre fondos muy variables (como fotografías), podemos usar sombras más pronunciadas:

.photo-caption {
  color: white;
  text-shadow: 
    1px 1px 2px black,
    0 0 5px rgba(0, 0, 0, 0.8);
}

Esta técnica crea un efecto de "contorno" que garantiza la legibilidad del texto independientemente del fondo.

Texto claro sobre fondo claro

Para mejorar la legibilidad de texto claro sobre fondos claros, podemos usar una sombra oscura:

.light-on-light {
  color: #f0f0f0;
  background-color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

Texto oscuro sobre fondo oscuro

De manera similar, para texto oscuro sobre fondos oscuros, una sombra clara puede mejorar la legibilidad:

.dark-on-dark {
  color: #333;
  background-color: #444;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

Efectos decorativos con text-shadow

Más allá de la legibilidad, text-shadow permite crear efectos visuales interesantes para títulos y elementos destacados:

Efecto de texto en relieve

.embossed-text {
  color: #888;
  background-color: #f5f5f5;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2), 
               1px 1px 1px rgba(255, 255, 255, 0.8);
}

Este efecto simula texto grabado o en relieve, utilizando una sombra oscura en la parte superior izquierda y una sombra clara en la parte inferior derecha.

Efecto de texto grabado

.engraved-text {
  color: #888;
  background-color: #f5f5f5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 
              -1px -1px 1px rgba(255, 255, 255, 0.8);
}

Este efecto es lo opuesto al relieve, creando la ilusión de texto hundido en la superficie.

Efecto de texto con resplandor

.glow-text {
  color: #fff;
  text-shadow: 0 0 5px #fff, 
               0 0 10px #fff, 
               0 0 15px #0073e6, 
               0 0 20px #0073e6;
}

Este ejemplo crea un efecto de resplandor azul alrededor del texto blanco, ideal para títulos llamativos o elementos destacados.

Efecto de texto con contorno

.outline-text {
  color: white;
  text-shadow: -1px -1px 0 #000,  
                1px -1px 0 #000,
               -1px  1px 0 #000,
                1px  1px 0 #000;
}

Este código crea un contorno negro alrededor del texto blanco, similar al efecto de stroke en diseño gráfico.

Múltiples sombras de texto

Al igual que con box-shadow, podemos aplicar múltiples sombras a un texto separándolas con comas:

.multi-shadow-text {
  color: #fff;
  text-shadow: 
    1px 1px 2px red,
    0 0 1em blue,
    0 0 0.2em blue;
}

Este ejemplo combina una sombra roja cercana con un resplandor azul más difuso, creando un efecto visual complejo.

Efectos de texto 3D

Las sombras múltiples son perfectas para crear efectos de texto tridimensional:

.text-3d {
  color: #fafafa;
  text-shadow: 
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25);
}

Este efecto crea la ilusión de texto extruido en 3D mediante capas de sombras con diferentes desplazamientos y colores.

Animando sombras de texto

Podemos animar la propiedad text-shadow para crear efectos dinámicos:

.pulsating-text {
  color: #fff;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
}

Este ejemplo crea un efecto pulsante donde la sombra del texto aumenta y disminuye su intensidad.

Consideraciones de accesibilidad

Al usar text-shadow para mejorar la legibilidad, es importante considerar la accesibilidad:

• Asegúrate de que el contraste entre el texto y el fondo sea suficiente, incluso sin la sombra (para usuarios que navegan con CSS desactivado).
• Evita sombras excesivamente brillantes o con demasiado desenfoque que puedan dificultar la lectura para personas con problemas de visión.
• Prueba tu diseño con herramientas de accesibilidad para verificar que cumple con los estándares WCAG.

/* Buen ejemplo de accesibilidad */
.accessible-text {
  color: #fff;
  background-color: #333;
  /* Sombra sutil que mejora la legibilidad sin distraer */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

Compatibilidad con navegadores

La propiedad text-shadow tiene buen soporte en todos los navegadores modernos. A diferencia de otras propiedades CSS más recientes, no necesita prefijos de proveedor en la actualidad.

Ejemplos prácticos de uso

Encabezado de página de inicio

.hero-heading {
  font-size: 3rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Este estilo crea un encabezado prominente con una sombra que mejora su legibilidad sobre imágenes de fondo.

Botón con efecto de texto

.button-text {
  color: white;
  background-color: #4CAF50;
  padding: 10px 20px;
  border-radius: 4px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.button-text:hover {
  background-color: #45a049;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

Este ejemplo muestra cómo la sombra del texto puede cambiar al interactuar con un elemento, reforzando el feedback visual.

Texto de advertencia

.warning-text {
  color: #ff6b6b;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(255, 0, 0, 0.2);
}

Una sombra sutil puede hacer que los mensajes de advertencia destaquen sin ser demasiado agresivos visualmente.

Combinando text-shadow con otras propiedades

Para efectos más avanzados, podemos combinar text-shadow con otras propiedades CSS:

.fancy-title {
  color: transparent;
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

Este ejemplo combina un texto con relleno de degradado y una sombra para crear un efecto visual sofisticado.

La propiedad text-shadow es una herramienta versátil que, cuando se usa correctamente, puede mejorar significativamente tanto la estética como la funcionalidad de tu texto. Ya sea para mejorar la legibilidad o para crear efectos visuales impactantes, las sombras de texto son un recurso valioso en el arsenal de cualquier diseñador web.

Rendimiento y consideraciones de drop-shadow vs box-shadow

Al trabajar con efectos de sombra en CSS, es importante entender las diferencias entre las distintas técnicas disponibles y cómo estas pueden afectar al rendimiento de nuestra página web. Dos de las opciones más utilizadas son box-shadow y filter: drop-shadow(), cada una con sus propias características y casos de uso óptimos.

Diferencias fundamentales

La principal diferencia entre estas dos técnicas radica en cómo aplican la sombra:

• box-shadow: Aplica la sombra al cuadro delimitador completo del elemento, independientemente de su forma o transparencia.
• filter: drop-shadow(): Genera una sombra que sigue la forma real del contenido renderizado, incluyendo áreas transparentes.

/* Sombra rectangular básica */
.box-shadow-example {
  width: 200px;
  height: 150px;
  background-color: tomato;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* Sombra que sigue la forma del contenido */
.drop-shadow-example {
  width: 200px;
  height: 150px;
  background-color: tomato;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

Casos de uso específicos

Cada técnica tiene escenarios donde brilla especialmente:

Cuándo usar box-shadow

• Para elementos con formas rectangulares o bordes redondeados simples
• Cuando necesitas sombras interiores (con el valor inset)
• Para crear múltiples sombras en un solo elemento
• En situaciones donde el rendimiento es crítico

.card {
  background-color: white;
  border-radius: 8px;
  /* Múltiples sombras fácilmente */
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

Cuándo usar filter: drop-shadow()

• Para elementos con formas irregulares (SVG, PNG con transparencia)
• Cuando trabajas con pseudo-elementos con formas personalizadas
• Para elementos con recortes (usando clip-path)
• Cuando necesitas una sombra que respete la opacidad del elemento

.custom-shape {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: purple;
  /* La sombra seguirá la forma de diamante */
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
}

Impacto en el rendimiento

El rendimiento es un factor crucial al elegir entre estas técnicas:

Rendimiento de box-shadow

• Generalmente más eficiente en términos de procesamiento
• Optimizado en la mayoría de navegadores
• El impacto en el rendimiento aumenta con:
• Mayor valor de blur-radius
• Mayor número de sombras múltiples
• Animaciones constantes de la sombra

/* Versión de alto rendimiento */
.efficient-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Versión potencialmente más costosa */
.expensive-shadow {
  box-shadow: 
    0 0 20px rgba(0, 0, 0, 0.1),
    0 0 40px rgba(0, 0, 0, 0.1),
    0 0 80px rgba(0, 0, 0, 0.1);
}

Rendimiento de filter: drop-shadow()

• Generalmente más costoso computacionalmente
• Requiere que el navegador analice la forma real del contenido
• Puede causar la creación de una nueva capa de composición
• El impacto es mayor en elementos complejos o que cambian frecuentemente

/* Puede ser costoso en rendimiento para formas complejas */
.svg-icon {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

Optimización del rendimiento

Para mantener un buen rendimiento al usar sombras, considera estas prácticas recomendadas:

• Limita el radio de desenfoque: Valores más pequeños requieren menos cálculos.

/* Más eficiente */
.efficient {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Menos eficiente */
.less-efficient {
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
}

• Reduce el número de sombras múltiples: Cada sombra adicional aumenta la carga de procesamiento.

• Usa will-change: transform o transform: translateZ(0) con precaución: Pueden ayudar con el rendimiento al forzar la aceleración por hardware, pero también pueden consumir memoria.

.hardware-accelerated {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateZ(0); /* Fuerza aceleración por hardware */
}

• Considera alternativas para elementos repetitivos: Para listas largas o elementos que se repiten muchas veces, considera usar imágenes de sombras o técnicas CSS más ligeras.

Compatibilidad con navegadores

La compatibilidad es otro factor importante a considerar:

• box-shadow: Excelente soporte en todos los navegadores modernos.
• filter: drop-shadow(): Buen soporte en navegadores actuales, pero puede requerir prefijos en versiones más antiguas.

/* Para mayor compatibilidad */
.cross-browser {
  -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

Ejemplos prácticos comparativos

Veamos algunos ejemplos que ilustran las diferencias clave:

Ejemplo 1: Elemento con transparencia

<div class="transparent-element box-shadow"></div>
<div class="transparent-element drop-shadow"></div>

.transparent-element {
  width: 150px;
  height: 150px;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 30px;
}

.box-shadow {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

.drop-shadow {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

En este ejemplo, box-shadow creará una sombra rectangular completa, mientras que drop-shadow creará una sombra que respeta la transparencia del elemento.

Ejemplo 2: Forma irregular con pseudo-elemento

<div class="speech-bubble"></div>

.speech-bubble {
  position: relative;
  background-color: #f8f8f8;
  border-radius: 10px;
  padding: 20px;
  width: 200px;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: #f8f8f8;
}

/* Versión con box-shadow - la sombra no afecta al "pico" */
.speech-bubble.with-box-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Versión con drop-shadow - la sombra sigue toda la forma */
.speech-bubble.with-drop-shadow {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}

En este caso, drop-shadow creará una sombra que incluye el "pico" del globo de diálogo, mientras que box-shadow solo sombreará el rectángulo principal.

Medición del impacto en el rendimiento

Para evaluar el impacto real en el rendimiento, puedes usar las herramientas de desarrollo del navegador:

1. Abre las DevTools (F12 en la mayoría de navegadores)
2. Ve a la pestaña "Performance" o "Rendimiento"
3. Registra la actividad mientras interactúas con elementos que usan sombras
4. Busca cuellos de botella en el renderizado o composición

Soluciones híbridas

En algunos casos, puedes combinar ambas técnicas para obtener el mejor resultado:

.hybrid-approach {
  /* Sombra básica eficiente para el elemento principal */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hybrid-approach img {
  /* Sombra que respeta la forma para la imagen */
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}

Alternativas para casos específicos

En situaciones donde el rendimiento es crítico, considera estas alternativas:

• Imágenes de sombra: Para elementos estáticos, una imagen de sombra puede ser más eficiente.
• Gradientes: En algunos casos, un gradiente puede simular una sombra sutil con mejor rendimiento.
• Elementos adicionales: A veces, un elemento HTML adicional con opacidad reducida puede crear un efecto de sombra con mejor rendimiento.

/* Simulando una sombra con un gradiente */
.gradient-shadow {
  background-image: 
    linear-gradient(to bottom, 
      rgba(0, 0, 0, 0) 0%, 
      rgba(0, 0, 0, 0.1) 100%);
  height: 10px;
  margin-top: -5px;
}

La elección entre box-shadow y filter: drop-shadow() debe basarse en tus necesidades específicas de diseño, el contexto de uso y las consideraciones de rendimiento. Para la mayoría de los casos comunes, box-shadow ofrece un buen equilibrio entre apariencia visual y rendimiento, mientras que drop-shadow brinda mayor fidelidad visual para formas complejas a costa de un mayor uso de recursos.