La propiedad box-shadow en CSS sirve como un mecanismo eficaz para que los desarrolladores introduzcan profundidad y dimensión en los elementos HTML. Al incorporar sombras en los elementos, se puede mejorar el realismo y el atractivo visual de la interfaz de usuario. Este artículo profundizará en los fundamentos de box-shadow y ofrecerá ejemplos para ayudarle a dominar su aplicación.

Comprensión de los conceptos básicos

La propiedad box-shadow consta de varios valores que definen cómo aparecerá la sombra. Aquí está la sintaxis básica:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: Este parámetro define el desplazamiento horizontal de la sombra. Los valores positivos desplazan la sombra hacia la derecha, los valores negativos la desplazan hacia la izquierda.
• offset-y: Este parámetro indica el desplazamiento vertical de la sombra. Los valores positivos mueven la sombra hacia abajo, los valores negativos la elevan.
• radio de desenfoque (opcional): Esta configuración regula la suavidad de la sombra. Un valor más alto da como resultado una sombra más difusa. Si no se especifica este parámetro, el valor predeterminado es 0, lo que produce una sombra distinta.
• spread-radius (opcional): Este parámetro afecta las dimensiones de la sombra. Los valores positivos aumentan el tamaño de la sombra, los valores negativos lo reducen.
• color: Este atributo define el color de la sombra. Puede ser cualquier representación de color CSS válida, como #000, rgba(0,0,0,0.5) o hsl(0, 0%, 50%).

Ejemplo: Sombra de cuadro básico

Veamos un ejemplo simple de un cuadro de sombra aplicado a un botón:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

En este caso, la sombra está desplazada por 5px horizontal y verticalmente, tiene un radio de desenfoque de 10px y está coloreada en negro con 0,3 de opacidad.

Ejemplo: Sombras insertadas

box-shadow también admite la palabra clave inset, que coloca la sombra dentro del elemento, dándole un efecto empotrado.

div {
  box-shadow: inset 0 0 10px #000;
}

Aquí, la sombra se coloca dentro del div, creando un efecto como si el contenido fuera empujado hacia adentro.

Consejos avanzados

• Tienes la capacidad de crear múltiples sombras delineando cada especificación box-shadow con una coma. Esta técnica permite la creación de intrincados efectos de sombras en capas.

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• Los efectos de sombra se emplean con frecuencia para producir interacciones al pasar el mouse, mejorando la interactividad de botones o tarjetas.

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

Para aquellos que prefieren un enfoque más visual, consulte el generador CSS Box-Shadow. Esta herramienta te permite crear efectos de sombra de cuadro personalizados sin esfuerzo, sin escribir ningún código ni guardar ajustes preestablecidos.