La Propiedad BOX-SHADOW

La propiedad box-shadow en CSS se utiliza para añadir efectos de sombra alrededor del marco de un elemento.

 

La propiedad box-shadow en CSS se utiliza para añadir efectos de sombra alrededor del marco de un elemento. Puedes configurar múltiples efectos de sombra en un solo elemento, incluyendo la dirección, el desenfoque, la extensión y el color de la sombra. Es una herramienta poderosa para mejorar la apariencia visual y la jerarquía de los elementos en tu página web.

Sintaxis Básica

La sintaxis básica de la propiedad box-shadow es la siguiente:

CSS
 
selector {
  box-shadow: h-offset v-offset [blur-radius] [spread-radius] [color] [inset];
}

Donde:

  • h-offset (Obligatorio): Especifica el desplazamiento horizontal de la sombra. Un valor positivo mueve la sombra hacia la derecha, y un valor negativo la mueve hacia la izquierda.
  • v-offset (Obligatorio): Especifica el desplazamiento vertical de la sombra. Un valor positivo mueve la sombra hacia abajo, y un valor negativo la mueve hacia arriba.
  • blur-radius (Opcional): Define el radio de desenfoque de la sombra. Cuanto mayor sea el valor, más borrosa será la sombra. Si no se especifica, el valor predeterminado es 0 (sin desenfoque).
  • spread-radius (Opcional): Define cuánto se extiende o contrae la sombra. Un valor positivo agranda la sombra, y un valor negativo la encoge. Si no se especifica, el valor predeterminado es 0 (sin extensión).
  • color (Opcional): Especifica el color de la sombra. Se puede usar cualquier valor de color CSS válido (nombres de colores, hexadecimales, RGB, RGBA, HSL, HSLA). Si no se especifica, el navegador suele usar el color del texto del elemento.
  • inset (Opcional): Es una palabra clave que, cuando se incluye, cambia la sombra de una sombra exterior (el comportamiento predeterminado) a una sombra interior.

Nota: Los valores h-offset y v-offset son obligatorios. Los demás son opcionales y pueden aparecer en cualquier orden antes del color (si se especifica). La palabra clave inset debe aparecer al final si se utiliza.

Ejemplos Prácticos

Veamos algunos ejemplos para entender mejor cómo funciona box-shadow:

Ejemplo 1: Sombra exterior básica

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    margin: 20px;
    box-shadow: 5px 5px gray; /* Desplazamiento horizontal de 5px, vertical de 5px, color gris */
  }
</style>
</head>
<body>

  <div class="caja"></div>

</body>
</html>

En este ejemplo, la caja tendrá una sombra gris desplazada 5 píxeles a la derecha y 5 píxeles hacia abajo.

Ejemplo 2: Sombra con radio de desenfoque

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    margin: 20px;
    box-shadow: 10px 10px 5px gray; /* Añadimos un radio de desenfoque de 5px */
  }
</style>
</head>
<body>

  <div class="caja"></div>

</body>
</html>

Aquí, la sombra será más suave y difusa debido al radio de desenfoque de 5 píxeles.

Ejemplo 3: Sombra con radio de extensión

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    margin: 20px;
    box-shadow: 5px 5px 5px 10px gray; /* Añadimos un radio de extensión de 10px */
  }
</style>
</head>
<body>

  <div class="caja"></div>

</body>
</html>

En este caso, la sombra será más grande que la caja original debido al radio de extensión positivo de 10 píxeles.

Ejemplo 4: Sombra interior

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 200px;
    height: 100px;
    background-color: lightsalmon;
    margin: 20px;
    box-shadow: inset 5px 5px 5px gray; /* Usamos la palabra clave 'inset' para una sombra interior */
  }
</style>
</head>
<body>

  <div class="caja"></div>

</body>
</html>

Ahora, la sombra aparecerá dentro de la caja, simulando un efecto de profundidad hacia el interior.

Ejemplo 5: Múltiples sombras

Puedes aplicar múltiples sombras a un elemento separando cada definición de sombra con una coma.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 200px;
    height: 100px;
    background-color: lightcyan;
    margin: 20px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), /* Primera sombra */
                -2px -2px 4px rgba(255, 255, 255, 0.5); /* Segunda sombra */
  }
</style>
</head>
<body>

  <div class="caja"></div>

</body>
</html>

Este ejemplo crea un efecto de "borde suave" con dos sombras opuestas.

Ejemplo 6: Sombra sutil para dar profundidad

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .tarjeta {
    width: 300px;
    background-color: white;
    margin: 30px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra muy suave */
  }
</style>
</head>
<body>

  <div class="tarjeta">
    <h3>Título de la Tarjeta</h3>
    <p>Contenido de la tarjeta. Esta sombra sutil ayuda a que la tarjeta parezca elevarse ligeramente.</p>
  </div>

</body>
</html>

Ejemplo 7: Sombra más pronunciada al pasar el ratón

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .boton {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .boton:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Sombra más grande al pasar el ratón */
  }
</style>
</head>
<body>

  <button class="boton">Haz clic aquí</button>

</body>
</html>

Este ejemplo muestra cómo usar box-shadow para crear una interacción visual al pasar el ratón sobre un botón.

Casos de Uso Comunes

  • Añadir profundidad visual a contenedores, tarjetas y otros elementos de la interfaz de usuario.
  • Crear una sensación de elevación para botones y elementos interactivos.
  • Separar visualmente elementos del fondo.
  • Implementar efectos de diseño como "neumorfismo" o "skeuomorfismo".
  • Resaltar elementos importantes o activos en una página.

Compatibilidad del Navegador

La propiedad box-shadow es ampliamente compatible con todos los navegadores modernos.

Consideraciones

  • El orden de los valores en la propiedad box-shadow es importante. Asegúrate de seguir el orden correcto: h-offset, v-offset, blur-radius, spread-radius, color, inset.
  • Si no especificas un color, el navegador utilizará el color del texto del elemento, lo cual a menudo no es el resultado deseado. Es buena práctica especificar siempre un color para la sombra.
  • Las sombras pueden afectar ligeramente el rendimiento si se usan en exceso o con valores de desenfoque y extensión muy grandes. Úsalas con moderación y prueba el rendimiento de tu sitio.
  • Experimenta con diferentes valores para lograr el efecto de sombra deseado. Puedes usar herramientas en línea para ayudarte a generar el código box-shadow.

Conclusión

La propiedad box-shadow es una herramienta versátil y poderosa en CSS que te permite añadir profundidad y estilo a tus elementos web. Al comprender sus diferentes valores y cómo combinarlos, puedes crear efectos visuales atractivos y mejorar la experiencia del usuario en tu sitio web. ¡No dudes en experimentar y explorar las posibilidades creativas que ofrece box-shadow!