Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad.

Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e incluso dar un efecto 3D genial.

En esta guía, exploraremos todas las opciones de sombra de caja disponibles en Divi, cómo usarlas y los mejores consejos y prácticas.

Cómo Funcionan las Sombras de Caja

Las sombras de caja son una propiedad de diseño única que no ocupa espacio real en la página (ni en el DOM HTML).

Cuando agregas una sombra de caja a un elemento en Divi, la sombra se aplica alrededor del elemento como un borde.

Sin embargo, a diferencia de un borde, la sombra no forma parte del modelo de caja CSS, que controla el tamaño total de un elemento (alto y ancho) incluyendo su contenido, relleno y borde. En resumen, esto significa que agregar una sombra de caja no afectará el tamaño ni el espacio del elemento en tu página.

Dónde Encontrar la Configuración de la Sombra de Caja

Estilos de Sombra de Caja Incorporados en Divi

Personalizando la Sombra de Caja

Posición Horizontal de la Sombra de Caja

• Un valor positivo coloca la sombra a la derecha del elemento.

• Un valor negativo coloca la sombra a la izquierda del elemento.

Arrastra el control deslizante o introduce un valor numérico en el campo para ajustar esta configuración.

Posición Vertical de la Sombra de Caja

• Un valor positivo coloca la sombra debajo del elemento.

• Un valor negativo coloca la sombra encima del elemento.

Arrastra el control deslizante o introduce un valor numérico en el campo para ajustar esta configuración.

Fuerza de Desenfoque de la Sombra de Caja

• Mientras mayor sea el valor, más grande será el desenfoque, lo que hace que la sombra sea más ancha y clara.

• Mientras menor sea el valor, la sombra será más oscura y estrecha.

Arrastra el control deslizante o ingresa un valor numérico en el campo para ajustar esta configuración.

Fuerza de Expansión de la Sombra de Caja

• Mientras mayor sea el valor, mayor será la densidad de la sombra, resultando en una sombra más intensa.

Arrastra el control deslizante o ingresa un valor numérico en el campo para ajustar esta configuración.

Color de la Sombra

• Paleta de colores guardados

• Colores globales

• Colores recientes

• O usar el ícono cuentagotas para seleccionar un nuevo color.

Al hacer clic en el cuentagotas, puedes ingresar un valor hexadecimal para el código de color o arrastrar el cuentagotas para encontrar un nuevo color. Recomendamos establecer una opacidad baja para tus colores para crear ese efecto suave de sombra de caja.

Posición de la Sombra de Caja

• Exterior: coloca la sombra fuera del elemento.

• Interior: coloca la sombra dentro del elemento.
  

Al ajustar los valores de la sombra de caja, los píxeles serán la unidad de longitud predeterminada. Sin embargo, puedes usar otras unidades CSS ingresándolas manualmente en el campo de cada propiedad. Las unidades permitidas incluyen:

• px (píxeles)

• vw (relativo al ancho de la ventana del navegador)

• vh (relativo a la altura de la ventana del navegador)

• em (relativo al tamaño de fuente del elemento)

• %

• vmin

• vmax

Sombra de Caja con Esquinas Redondeadas

Consejos y Buenas Prácticas para Sombra de Caja

• Usa sombras de caja con bordes
  Aplicar un borde y sombra de caja a un elemento crea dos capas creativas para enmarcar el contenido.

• Efecto dimensional
  Usa la sombra de caja para crear profundidad 3D en tus elementos de diseño. Aumenta el desenfoque y la expansión para dar la ilusión de que el objeto está más cerca del espectador, y disminúyelos para que parezca más lejos.

• Asegura la visibilidad de las sombras con desbordamiento horizontal y vertical
  En algunos casos, puede que no veas la sombra exterior de un elemento. Si esto ocurre, en Avanzado → Visibilidad, asegúrate de que el desbordamiento horizontal y vertical esté configurado como visible cuando uses una sombra exterior; de lo contrario, se ocultará.

• Usa colores con baja opacidad para ilustrar profundidad
  Usa un color con opacidad sutil para mostrar profundidad en la sombra. Puedes bajar la opacidad de cualquier color de sombra usando el sistema de gestión de color incorporado.

• Enmarca el contenido sin ocupar espacio
  

• En diseño web, una técnica para organizar contenido es usar bordes alrededor de los elementos. Pero es importante recordar que los bordes ocupan espacio en píxeles, y al reducir el tamaño de la ventana del navegador, el borde puede limitar el ancho del contenido del contenedor.

• Las sombras de caja no ocupan espacio en la página, por lo que no afectan el cambio de tamaño del contenido cuando la ventana se hace más pequeña. Para ver cómo cambia el tamaño del contenido con un borde grande y cómo permanece igual con una sombra de caja, mira el video adjunto.

• Enmarca contenido de manera creativa
  Puedes usar sombras de caja creativamente para resaltar contenido importante y hacer que los elementos destaquen. Consulta ejemplos para inspiración.

• Paquete de diseño Stone Factory 
  

• Paquete de diseño Hostel 

  

• Paquete de diseño Interior Design

Continúa Aprendiendo

• Cómo agregar sombras de caja en un solo lado a elementos de diseño en Divi

• Cómo crear objetos "flotantes" en Divi usando sombra proyectada

• Cómo usar sombras de caja como fondos deslizantes al pasar el cursor

• Cómo combinar fondo de imagen y opciones de sombra de caja con Divi