Ejemplo para aplicar sombras a elementos en CSS

Las sombras son una excelente manera de agregar profundidad y dimensión a los elementos en una página web. En CSS, el uso de sombras es muy versátil, ya que permite tanto sombras para cajas (contenedores) como para textos. A continuación, te mostramos cómo puedes aplicar sombras a diferentes elementos y personalizar su apariencia.

1. Sombras para contenedores (box-shadow)

La propiedad box-shadow en CSS es una de las más comunes para agregar sombras a cajas o elementos de contenedor como divs, botones, imágenes, etc. Aquí tienes la sintaxis básica:

css
box-shadow: desplazamientoX desplazamientoY difuminado expansión color;

• desplazamientoX: Desplazamiento de la sombra en el eje horizontal. Un valor positivo mueve la sombra a la derecha; un valor negativo, a la izquierda.
• desplazamientoY: Desplazamiento en el eje vertical. Un valor positivo mueve la sombra hacia abajo; un valor negativo, hacia arriba.
• difuminado: Controla qué tan suave o nítido es el borde de la sombra. Valores altos crean sombras más suaves.
• expansión: Controla el tamaño general de la sombra. Valores positivos hacen que la sombra sea más grande, y valores negativos la hacen más pequeña.
• color: El color de la sombra.

Ejemplo básico de box-shadow

Vamos a crear un cuadro sencillo con sombra.

html
<div class="caja-sombra">
    Este es un ejemplo de sombra en una caja.
</div>

css
.caja-sombra {
    width: 200px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

En este ejemplo, la sombra se desplaza 5px a la derecha y 5px hacia abajo, con un difuminado de 15px y un color negro semitransparente (30% de opacidad).

2. Personalizando la sombra

Puedes ajustar los valores de box-shadow para crear diferentes efectos visuales. Aquí tienes algunos ejemplos:

• Sombra interna: Usando el valor inset, la sombra se aplica hacia adentro del elemento.

  css
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  

• Sombra múltiple: Puedes combinar varias sombras separándolas con comas.

  css
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(0, 0, 0, 0.3);
  

Ejemplo de sombra estilo "tarjeta elevación"

Este tipo de sombra es popular en tarjetas, creando un efecto de elevación. Aquí un ejemplo para una tarjeta:

html
<div class="tarjeta-elevada">
    Esta tarjeta parece estar elevada del fondo.
</div>

css
.tarjeta-elevada {
    width: 250px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

3. Sombras para textos (text-shadow)

Además de box-shadow, puedes aplicar sombras a textos con la propiedad text-shadow. La sintaxis es similar:

css
text-shadow: desplazamientoX desplazamientoY difuminado color;

Ejemplo de text-shadow

html
<h2 class="texto-sombra">Sombra en texto</h2>

css
.texto-sombra {
    font-size: 24px;
    color: #333;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Este ejemplo aplicará una sombra de 2px hacia la derecha, 2px hacia abajo, con un difuminado de 5px y un color negro semitransparente.

4. Ejemplo de sombras "neón" para textos

Para hacer que un texto tenga una sombra tipo "neón", puedes usar colores brillantes y múltiples sombras:

css
.texto-neon {
    color: #0ff;
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff;
}

Consejos finales

• Usa sombras con moderación. Muchas sombras intensas pueden hacer que el diseño se vea sobrecargado.
• RGBA es ideal para sombras porque permite controlar la opacidad, haciendo que se vean más naturales.
• Experimenta con combinaciones de box-shadow y text-shadow para crear efectos únicos y atractivos.

Ejemplo completo: Aplicando sombras a cajas y texto

Para terminar, aquí tienes un ejemplo final donde aplicamos sombras tanto a un contenedor como a un texto.

html
<div class="caja-completa">
    <h2 class="texto-sombra">Sombra en caja y texto</h2>
    <p>Esta es una demostración de sombras en CSS.</p>
</div>

css
.caja-completa {
    width: 300px;
    padding: 20px;
    margin: 20px;
    background-color: #f0f0f0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.texto-sombra {
    font-size: 24px;
    color: #333;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

Este código crea una caja con una sombra ligera y un texto con un efecto de sombra suave.