Crear sombras de caja con CSS

Introducción

En este laboratorio, explorarás la poderosa propiedad CSS box-shadow y aprenderás a crear efectos de sombras visualmente atractivos para los elementos web. A través de un enfoque paso a paso, entenderás la sintaxis fundamental de las sombras de caja, aplicarás técnicas básicas y avanzadas de sombras y descubrirás cómo personalizar las propiedades de las sombras para mejorar la profundidad y el interés visual de los elementos HTML.

El laboratorio aborda conceptos clave como la comprensión de la sintaxis de la sombra de caja, la aplicación de sombras a diferentes formas, la experimentación con el desplazamiento, el radio de desenfoque y las variaciones de color. Al final de este laboratorio, tendrás habilidades prácticas para crear sombras con aspecto profesional que pueden transformar la presentación visual de los diseños web, agregando una sutileza de profundidad y dimensionalidad a tus interfaces de usuario.

Comprender la sintaxis de la sombra de caja

En este paso, aprenderás la sintaxis fundamental de las sombras de caja de CSS y cómo pueden agregar profundidad e interés visual a los elementos web. La propiedad box-shadow es una característica poderosa de CSS que te permite crear efectos de sombras para los elementos HTML.

Comencemos creando un nuevo archivo HTML para explorar la sintaxis de la sombra de caja. Abra el WebIDE y cree un archivo llamado index.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Box Shadow Syntax</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        /* Sintaxis básica de box-shadow */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Analicemos la sintaxis de box-shadow:

5px: Desplazamiento horizontal (mueve la sombra hacia la derecha)
5px: Desplazamiento vertical (mueve la sombra hacia abajo)
10px: Radio de desenfoque (suaviza la sombra)
rgba(0, 0, 0, 0.3): Color de la sombra con transparencia

La sintaxis básica es: box-shadow: [desplazamiento horizontal] [desplazamiento vertical] [radio de desenfoque] [color]

Salida de ejemplo de la caja renderizada con sombra:

+------------------------+
|                        |
|    [Caja Gris con      |
|     Sombra Suave]      |
|                        |
+------------------------+

Puntos claves a recordar:

Los valores de desplazamiento positivo mueven la sombra hacia la derecha y hacia abajo
Los valores de desplazamiento negativo mueven la sombra hacia la izquierda y hacia arriba
El radio de desenfoque suaviza los bordes de la sombra
Puedes usar nombres de color, hexadecimales, RGB o valores RGBA

Aplicar una sombra de caja básica a un div

En este paso, aprenderás cómo aplicar una sombra de caja básica a un elemento div, basándote en la sintaxis que aprendiste en el paso anterior. Modificaremos el archivo HTML existente para demostrar diferentes efectos de sombra.

Abra el archivo index.html en el WebIDE y actualice su contenido con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Box Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
      }

      /* Sombra ligera */
      .light-shadow {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      }

      /* Sombra más oscura */
      .dark-shadow {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box light-shadow"></div>
      <div class="box dark-shadow"></div>
    </div>
  </body>
</html>

Analicemos la aplicación de la sombra de caja:

Creamos dos elementos div con diferentes intensidades de sombra
.light-shadow utiliza una sombra sutil con:
- 5px de desplazamiento horizontal
- 5px de desplazamiento vertical
- 10px de radio de desenfoque
- Color negro claro con 20% de opacidad
.dark-shadow utiliza una sombra más pronunciada con:
- 10px de desplazamiento horizontal
- 10px de desplazamiento vertical
- 15px de radio de desenfoque
- Color negro más oscuro con 50% de opacidad

Salida visual de ejemplo:

+------------------------+------------------------+
|                        |                        |
|   [Caja con Sombra Ligera]   |   [Caja con Sombra Oscura]    |
|                        |                        |
+------------------------+------------------------+

Observaciones clave:

Aumentar los valores de desplazamiento aleja la sombra del elemento
Aumentar el radio de desenfoque hace que la sombra sea más suave
Ajustar la opacidad cambia la intensidad de la sombra

Personalizar las propiedades de la sombra de caja

En este paso, explorarás opciones de personalización avanzadas para las sombras de caja, incluyendo sombras incrustadas, radio de propagación y variaciones de color. Actualizaremos el archivo index.html para demostrar estas propiedades avanzadas.

Abra el archivo index.html en el WebIDE y reemplace su contenido con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Customized Box Shadows</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: #f0f0f0;
      }

      /* Sombra incrustada */
      .inset-shadow {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
      }

      /* Radio de propagación */
      .spread-shadow {
        box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
      }

      /* Sombra coloreada */
      .colored-shadow {
        box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box inset-shadow"></div>
      <div class="box spread-shadow"></div>
      <div class="box colored-shadow"></div>
    </div>
  </body>
</html>

Exploremos las nuevas personalizaciones de la sombra de caja:

Sombra incrustada:
- Utiliza la palabra clave inset para crear una sombra interna
- Da el efecto de que el elemento está presionado o ahuecado
- Sintaxis: box-shadow: inset [desplazamiento horizontal] [desplazamiento vertical] [radio de desenfoque] [color]
Radio de propagación:
- Agrega un valor adicional para expandir la sombra
- El cuarto valor numérico controla la propagación de la sombra
- En el ejemplo, la propagación de 10px crea un borde de sombra con tinte azul
Sombra coloreada:
- Utiliza RGBA para crear sombras coloreadas con transparencia
- El ejemplo utiliza una sombra roja con 40% de opacidad

Salida visual de ejemplo:

+------------------------+------------------------+------------------------+
|                        |                        |                        |
| [Caja con Sombra Inscrita]     | [Caja con Sombra de Propagación]    | [Caja con Sombra Coloreada]   |
|                        |                        |                        |
+------------------------+------------------------+------------------------+

Puntos claves:

inset crea una sombra interna
El radio de propagación expande la sombra
Utiliza RGBA para sombras coloreadas y transparentes

Crear un elemento circular con sombra

En este paso, aprenderás cómo crear un elemento circular con una sombra de caja utilizando las propiedades border-radius y box-shadow de CSS. Abra el archivo index.html en el WebIDE y actualice su contenido con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circular Element with Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .circular-element {
        width: 200px;
        height: 200px;
        background-color: #ffffff;

        /* Crear forma circular */
        border-radius: 50%;

        /* Agregar sombra de caja */
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.2),
          0 6px 6px rgba(0, 0, 0, 0.15);

        /* Centrar contenido */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Opcional: agregar texto */
        font-family: Arial, sans-serif;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circular-element">Circular Shadow</div>
    </div>
  </body>
</html>

Técnicas clave para crear un elemento circular con sombra:

Forma circular:
- Utiliza border-radius: 50% para crear un círculo perfecto
- Asegúrate de que el ancho y la altura sean iguales
Sombra de caja:
- Primera sombra: 0 10px 20px rgba(0, 0, 0, 0.2)
  - Desplazamiento vertical de 10px
  - Radio de desenfoque de 20px
  - Color negro suave con 20% de opacidad
- Segunda sombra: 0 6px 6px rgba(0, 0, 0, 0.15)
  - Agrega profundidad con una sombra más cercana y suave

Salida visual de ejemplo:

+------------------------+
|                        |
|    [Elemento Circular   |
|     con Sombra Suave]  |
|                        |
+------------------------+

Puntos claves:

border-radius: 50% crea un círculo perfecto
Varias sombras de caja pueden crear profundidad
Ajusta la opacidad y el desenfoque para el efecto deseado

Experimentar con múltiples efectos de sombra

En este paso, explorarás técnicas avanzadas para crear efectos de sombra complejos utilizando múltiples sombras de caja. Abre el archivo index.html en el WebIDE y actualiza su contenido con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Shadow Effects</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }

      .card {
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;

        /* Efecto de múltiples sombras */
        box-shadow: 
                /* Sombra exterior */
          0 10px 20px rgba(0, 0, 0, 0.1),
          /* Sombra interior */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
          /* Sombra de énfasis coloreada */ 0 15px 25px rgba(0, 123, 255, 0.2);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: scale(1.05);
        box-shadow:
          0 15px 30px rgba(0, 0, 0, 0.2),
          inset 0 -5px 10px rgba(0, 0, 0, 0.1),
          0 20px 35px rgba(0, 123, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Shadow Experiment</h2>
      <p>Hover to see shadow effect!</p>
    </div>
  </body>
</html>

Técnicas clave para múltiples efectos de sombra:

Sombras superpuestas:
- Primera sombra: Sombra exterior suave
- Segunda sombra: Sombra interior sutil
- Tercera sombra: Sombra de énfasis coloreada
Composición de sombras:
- 0 10px 20px rgba(0, 0, 0, 0.1): Sombra exterior suave
- inset 0 -5px 10px rgba(0, 0, 0, 0.05): Sombra interior sutil
- 0 15px 25px rgba(0, 123, 255, 0.2): Sombra de énfasis azul
Efecto al pasar el cursor:
- Aumenta la intensidad de la sombra al pasar el cursor
- Agrega una transformación de escala para una sensación interactiva

Salida visual de ejemplo:

+------------------------+
|                        |
|   [Tarjeta con Efectos   |
|    de Sombra Complejos]     |
|                        |
+------------------------+

Puntos claves:

Combina múltiples sombras para crear profundidad
Utiliza inset para sombras internas
Crea efectos interactivos con el cursor

Resumen

En este laboratorio, los participantes exploran la poderosa propiedad CSS box-shadow para crear profundidad y dimensión visualmente atractivas para los elementos web. Al aprender la sintaxis fundamental de las sombras de caja, los estudiantes descubren cómo aplicar efectos de sombra utilizando desplazamientos horizontales y verticales, radio de desenfoque y parámetros de color, lo que les permite mejorar el diseño visual de los elementos HTML.

El laboratorio guía a los aprendices a través de ejercicios prácticos, incluyendo la creación de sombras de caja básicas, la personalización de las propiedades de la sombra y la experimentación con múltiples efectos de sombra. Los participantes adquirirán experiencia práctica en la manipulación de características de la sombra, como la dirección del desplazamiento, la intensidad del desenfoque y la transparencia del color, lo que puede mejorar significativamente la estética y la jerarquía visual de los componentes de la página web.