Tutorial de CSS Box Shadow: guía paso a paso (+ ejemplos)

¿Por qué la box-shadowpropiedad CSS merece su propio tutorial? Porque, como verás a continuación, es una de las propiedades más complejas que toma varios valores al mismo tiempo. Esto puede resultar especialmente complicado para principiantes.

Si hasta ahora ha tenido problemas para utilizarla box-shadowcorrectamente, ha llegado al lugar adecuado. En la siguiente guía, repasaremos todo lo que hay que saber sobre esta propiedad CSS. Hablaremos de lo que hace, cómo utilizar su sintaxis correctamente, algunos box-shadowejemplos interesantes de CSS y, por último, algunas herramientas generadoras que facilitan el trabajo con ella.

¿Qué es CSS Box Shadow?

Incluso si no conoces la box-shadowpropiedad CSS hasta ahora, probablemente la hayas visto en acción en la web.

Arriba hay un buen ejemplo de cómo se ve en la naturaleza (aunque lo he aumentado un poco aquí para dejar en claro un punto). box-shadowes básicamente lo que dice el nombre: te permite agregar una sombra paralela al marco de casi cualquier elemento. La sombra también se adherirá a la forma de su ancla, ya sea cuadrada, rectangular, redonda u ovalada. Esto es válido incluso cuando has establecido una border-radiuspropiedad.

En la web, la gente lo utiliza para crear distintos efectos y veremos algunos box-shadowejemplos interesantes a continuación. Por ahora, hablemos de cómo funciona en el nivel más básico.

Sintaxis básica de sombra de cuadro

Cuando miras un elemento con una sombra de cuadro usandoherramientas para desarrolladores de navegadoresEncontrarás un marcado como este:

box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Parece un poco complicado ¿verdad?

Pero no te preocupes, no necesitas todas estas declaraciones todo el tiempo. Además, una vez que entiendas cómo funcionan, ya no te parecerá tan confuso como al principio.

Como puede ver arriba, box-shadowpuede tomar hasta seis valores. Vamos a analizarlos uno por uno.

desplazamiento-x

El primer valor es la distancia horizontal de la sombra proyectada desde el lado de su elemento de anclaje. Un valor positivo la mueve hacia la derecha y uno negativo hacia la izquierda.

Puede utilizar todos los tipos de datos CSS comunes que indican la longitud de este valor, como px, em, vh, y más. Los más utilizados son pxy em.

desplazamiento-y

Igual que el anterior pero para el eje vertical. Los valores positivos mueven la sombra hacia abajo del elemento y los negativos hacia arriba.

radio de desenfoque

Esto define el desenfoque de la sombra del cuadro. Cuanto mayor sea el valor, más desenfocado estará. blur-radiusTambién acepta todas las denominaciones de longitud CSS comunes, pero ningún valor negativo.

radio de expansión

Este control controla la extensión de la sombra más allá de la altura o el ancho de su elemento. Cuanto mayor sea la longitud, mayor será la extensión. También puedes usar números negativos para introducir contracción.

color

Como probablemente puedas adivinar, esto te permite definir el color de la sombra del cuadro de todas las formas habituales. La mayoría de las veces se indica en valores hexadecimales (por ejemplo, #ededed) o rgba (por ejemplo, rgba(46, 182, 142, 0.9)). Este último también te permite controlar la opacidad, que se usa comúnmente para sombras paralelas.

Tenga en cuenta que si no establece un color, el navegador utilizará el color de texto utilizado actualmente.

recuadro

Por último, puedes añadir opcionalmente insetel principio de la declaración. Esto cambia la sombra de una sombra paralela a una sombra dentro del elemento. Aparece dentro del borde, encima del fondo, pero debajo del contenido del elemento, por lo que no cubrirá ningún texto, por ejemplo.

Utilizando los valores en orden

Aquí está el orden en que box-shadowaparecen los valores de la propiedad.

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

Para asignar una sombra a un cuadro, necesitas al menos dos valores de longitud. El navegador los usará automáticamente para offset-xy offset-y. Si agregas un tercero, se interpretará como blur-radius, un cuarto como spread-radius. insety colorson opcionales y pueden aparecer al final o al principio y en cualquier orden. El CSS a continuación tendrá el mismo resultado.

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

Asignación de varias sombras de caja

Algo que no todo el mundo sabe es que se pueden establecer varias sombras de cuadro para el mismo elemento. Para ello, basta con proporcionar más de un grupo de valores y separarlos con comas.

box-shadow:ActualizadoActualizado 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

El código anterior se ve así:

También puedes usar esto para crear líneas alrededor de los elementos. Para ello, solo tienes que añadir varias sombras de diferentes colores y establecer sus desplazamientos y desenfoques en cero.

box-shadow: 0 0 0Actualizado rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Esto da como resultado contornos con diferentes colores:

Tenga en cuenta que esto no afectaDimensiones del modelo de caja, por lo que las sombras de los cuadros no se suman al tamaño general de un elemento de la forma en que marginlo borderharán.

Compatibilidad del navegador

Compatibilidad del navegadorfor box-shadowno es algo de lo que deba preocuparse. Es una propiedad CSS muy establecida y aceptada por prácticamente todos los navegadores, incluidos los marcados como insety las sombras múltiples.

Para dar compatibilidad con versiones anteriores de algunos navegadores, es habitual incluir las propiedades -webkit-box-shadowy -moz-box-shadowcon los mismos valores. Sin embargo, para las versiones más recientes de los navegadores más comunes, esto ya no es necesario.

Ejemplos de sombras de cuadros CSS

A continuación, en este box-shadowtutorial, queremos repasar algunos ejemplos de sombras de cuadros CSS para que puedas ver lo que es posible con esta propiedad. Pasaremos de aplicaciones bastante estándar a otras más extraordinarias porque, como verás, puedes hacer cosas realmente interesantes con ella.

Agregar una sombra a un botón

Los botones suelen ser un elemento al que se le aplica una sombra en forma de cuadro. Esto se debe a que es una buena forma de hacer que destaquen en la página. Después de todo, si incluye un botón, normalmente quiere que la gente haga clic en él. Para incitarlos a hacerlo, aquí tiene un ejemplo sencillo de cómo hacerlo con una sombra en forma de cuadro.

El marcado que lo acompaña se ve así:

box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Sombra de caja suave

Si desea crear una sombra de cuadro CSS relativamente suave, generalmente trabaja con desenfoque y dispersión mientras establece los desplazamientos en 0. De esta manera, la sombra no adquiere una forma definida, sino que simplemente aparece suavemente alrededor de los bordes.

Para lograr el efecto anterior, puede utilizar el siguiente marcado:

box-shadow: 0 0 50px 10px #999;

Esta también es una excelente manera de crear una sombra en forma de cuadro en todos los lados de un elemento. Si quieres que se destaque más, simplemente aumenta la extensión, reduce el desenfoque y usa un color más oscuro.

Sombras de cajas múltiples

Los box-shadowejemplos finales son para usar varias sombras a la vez. Esto ofrece diferentes posibilidades. Por ejemplo, puedes introducir una sombra cuadrada de varios pasos con un efecto de desvanecimiento.

Es sorprendentemente simple: solo necesitas apilar sombras de caja una sobre otra con compensaciones que aumentan de manera uniforme mientras reduces la opacidad al mismo tiempo. Por cierto, cuando se usan muchas sombras de caja, resulta útil escribir las declaraciones en líneas separadas en lugar de como una declaración larga. Esto hace que sea mucho más fácil de entender.

box-shadow:10px 10px rgba(0, 0, 0, 0.4),20pxActualizado rgba(0, 0, 0, 0.3),30px 30px rgba(0, 0, 0, 0.2),40px 40px rgba(0, 0, 0, 0.1),50px 50px rgba(0, 0, 0, 0.05);

También puedes llevar esto más allá introduciendo sombras de cuadros blancos con un spread-radiusvalor negativo entre ellos, lo que da como resultado la ilusión de varios elementos uno encima del otro.

¿Por qué el valor de spread negativo? Porque de lo contrario, las sombras de los cuadros blancos cubrirían los que están debajo. El valor negativo los encoge para que el color que está detrás pueda verse a través de ellos. A continuación, se muestra el marcado que necesita si desea introducir un efecto similar en su propio sitio web:

box-shadow:10px 10px 0px -3px rgba(255, 255, 255),10px 10px rgba(0, 0, 0, 0.4),20pxActualizado 0px -3px rgba(255, 255, 255),20pxActualizado rgba(0, 0, 0, 0.3),30px 30px 0px -3px rgba(255, 255, 255),30px 30px rgba(0, 0, 0, 0.2),40px 40px 0px -3px rgba(255, 255, 255),40px 40px rgba(0, 0, 0, 0.1),50px 50px 0px -3px rgba(255, 255, 255),50px 50px rgba(0, 0, 0, 0.05);

El último ejemplo de varias sombras de cuadro CSS es el método mencionado anteriormente de establecer los desplazamientos y el desenfoque en 0. Como hemos visto anteriormente, el resultado es que el elemento tiene varios contornos, en este caso coloridos. Sin embargo, esto solo funciona porque el spread-radiusvalor aumenta para cada sombra de cuadro.

Si quieres probarlo tú mismo, puedes empezar con esto:

box-shadow:0px 0px 0px 3px red,0px 0px 0px 6px orange,0px 0px 0px 9px yellow,0px 0px 0px 12px green,0px 0px 0px 15px blue,0px 0px 0px 18px indigo,0px 0px 0px 21px violet;

Los mejores generadores de sombras de cajas

Como ya hemos comentado, box-shadowse necesitan muchos valores, por lo que puede que sea necesario un poco de ensayo y error hasta llegar al tipo de sombra que desea.

Para hacerlo más fácil, hay una gran cantidad de herramientas generadoras de sombras de caja que le permiten jugar con sus controles, ver los resultados de inmediato y luego simplemente copiar el marcado una vez que esté satisfecho.

Aquí están las mejores opciones para generadores de sombras de caja:

• caja-sombra.dev— Esta herramienta de un solo propósito tiene todas las funciones que necesita y la mejor interfaz de usuario de todas. Puede usar inset, crear varias sombras de cuadro, controlar los desplazamientos, el desenfoque y la propagación mediante controles deslizantes e ingresar colores manualmente. Cuando esté satisfecho, haga clic enMostrar códigopara copiar el código CSS. El único inconveniente es que no proporciona código para navegadores más antiguos.
• Generador de CSS de sombras de cuadros CSSmatic— Similar al anterior. Permite controlar las box-shadowpropiedades mediante controles deslizantes y también ingresar números manualmente. Tiene su propio control de opacidad, lo cual es bueno. Por otro lado, le falta la funcionalidad para múltiples sombras. El código de marcado que se obtiene incluye navegadores más antiguos.
• Generador CSS de sombras de caja— Una opción sólida que también tiene la capacidad de seleccionar colores y te brinda código para navegadores más antiguos. Puedes copiarlo con un simple clic. Tiene control de opacidad, pero solo puede crear una sombra paralela.
• Generador de sombras de caja CSS3gen— Otro generador de sombras paralelas. Una característica interesante es que, en lugar de los desplazamientos x e y, puedes seleccionar el ángulo y la distancia de la sombra y la herramienta hará el resto automáticamente. Por alguna razón spread-radius, insettienen su propio menú. El CSS que puedes copiar y pegar también incluye marcado para generaciones anteriores de navegadores.

Reflexiones finales: CSS Box Shadow

Al principio, la box-shadowpropiedad puede resultar abrumadora. Es una de esas propiedades que aceptan muchos valores, por lo que puede parecer más complicada de lo que es en realidad. Con suerte, este tutorial de CSS box-shadow habrá acabado con esa sensación.

Más arriba, hemos repasado qué box-shadowes CSS y cómo funciona. Hemos explicado la sintaxis, los valores y cómo funcionan juntos. Además, hemos repasado una serie de ejemplos sobre cómo utilizar las sombras de los cuadros CSS en la vida real, incluido el marcado que puede utilizar de inmediato. Por último, para aquellos que quieran un poco de ayuda, hemos enumerado una serie de box-shadowgeneradores CSS que pueden hacer gran parte del trabajo pesado por usted.

A esta altura, ya deberías poder usar esta función CSS en tu sitio web. Esperamos ver qué haces con ella.

¿Cómo estás usando la sombra del cuadro CSS en tu sitio web? ¿Hay algún caso de uso interesante que no hayamos tratado anteriormente? ¡Cuéntanoslo en los comentarios a continuación!