52 - Sombras en CSS: Dale profundidad a tu diseño 🕶️

---

52 - Sombras en CSS: Tus letras más lindas ✨

Las sombras en CSS añaden profundidad y un toque de profesionalismo a tus elementos. Puedes aplicarlas a texto (text-shadow) o a cuadros y otros elementos (box-shadow).

Temas de la lección

• 1. Efectos de la sombra
• 2. Texto Sombra
• 3. Sombras múltiples (Texto)
• 4. Caja de la sombra
• 5. Propiedades de la sombra de caja
• 6. Sombra horizontal y vertical
• 7. Color para la sombra
• 8. Efecto de desenfoque
• 9. Radio de propagación
• 10. Parámetro inset
• 11. Múltiples sombras (Caja)
• 12. Ejemplo: Tarjetas

---

1. Efectos de la sombra

Las sombras son una forma de imitar la luz y la profundidad en un diseño 2D. En CSS, las propiedades text-shadow y box-shadow te permiten crear efectos de sombra que pueden ser sutiles o dramáticos.

---

2. Texto Sombra

La propiedad text-shadow aplica una sombra a un texto. Los valores son: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque (opcional) y color (opcional).

h2 {
  text-shadow: 2px 2px #ff0000;
}

Ejemplo 1: Sombra simple

Sombras en Texto

h2 {
  text-shadow: 2px 2px 5px blue;
}

Ejemplo 2: Sombra con desenfoque

Sombras con desenfoque

---

3. Sombras múltiples

Puedes añadir varias sombras a un mismo texto separándolas por comas. Esto te permite crear efectos más complejos, como neón o relieves.

h2 {
  text-shadow: 2px 2px 4px #000000, 0 0 25px blue, 0 0 5px darkblue;
}

Ejemplo: Efecto neón

Efecto Neón

---

4. Caja de la sombra

La propiedad box-shadow aplica una o más sombras a un elemento (como un div). Es una de las formas más comunes de darle un aspecto tridimensional a los elementos.

---

5. Propiedades de la sombra de caja

La sintaxis de box-shadow puede incluir varios valores en este orden: [horizontal] [vertical] [desenfoque] [propagación] [color] [inset]. Todos son opcionales excepto los desplazamientos horizontal y vertical.

---

6. Sombra horizontal y vertical

Los primeros dos valores definen el desplazamiento de la sombra en el eje X (horizontal) y el eje Y (vertical).

.caja {
  box-shadow: 10px 10px; /* Desplazamiento horizontal y vertical */
}

---

7. Color para la sombra

Puedes especificar un color para la sombra, lo que te da un control creativo. Si no se especifica, se usará el color de texto del elemento o el color por defecto.

.caja {
  box-shadow: 5px 5px 5px #0000ff; /* Sombra de color azul */
}

---

8. Efecto de desenfoque a la sombra

El tercer valor es el radio de desenfoque. Un valor de 0 crea una sombra nítida, mientras que valores más altos hacen que la sombra se difumine.

.caja {
  box-shadow: 5px 5px 15px black;
}

---

9. Radio de propagación de la sombra

El cuarto valor, el radio de propagación, expande o contrae el tamaño de la sombra. Un valor positivo la hace más grande, mientras que uno negativo la hace más pequeña.

.caja {
  box-shadow: 5px 5px 5px 5px #888888; /* +5px de propagación */
}

---

10. Establezca el parámetro inset

La palabra clave inset cambia la sombra de una sombra exterior a una sombra interior.

.caja {
  box-shadow: inset 0 0 10px #555;
}

---

11. Añadir múltiples sombras

Puedes aplicar múltiples sombras a un mismo elemento. Simplemente separa cada conjunto de valores con una coma.

.caja {
  box-shadow: 
    3px 3px 5px rgba(0,0,0,0.5),
    -3px -3px 5px rgba(255,255,255,0.8);
}

---

12. Ejemplo: Tarjetas

Un uso muy común de box-shadow es crear tarjetas de contenido con una sombra que les da una apariencia "flotante".

.tarjeta {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Mi Tarjeta

Este es un ejemplo de una tarjeta con una sombra de caja.

---

Ir al índice