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

¿Por qué la propiedad CSS Box-Shadow merece su propio tutorial? Porque, como verá a continuación, es una de las propiedades más complejas que toman varios valores al mismo tiempo. Esto podría hacer un desafío especial para los principiantes. Si hasta ahora ha tenido problemas para usar la sombra de caja correctamente, ha llegado al lugar correcto. En la guía a continuación, revisaremos todo lo que sea para saber sobre esta propiedad CSS. Hablaremos sobre lo que hace, cómo usar su sintaxis correctamente, algunos ejemplos interesantes de cajas CSS y, finalmente, algunas herramientas de generación que lo facilitan.
¿Qué es CSS Box Shadow? Incluso si no conoce la propiedad de CSS Box-Shadow hasta ahora, probablemente la haya visto en la web.

Arriba es un buen ejemplo de cómo se ve en la naturaleza (aunque lo aumenté un poco aquí para hacer un punto). La sombra de caja es prácticamente lo que dice el nombre: le permite agregar una sombra en casi cualquier elemento. La sombra también se adherirá a la forma de su ancla, ya sea cuadrado, rectangular, redondo u ovalado. Esto es cierto incluso cuando establece una propiedad Border-Radius.

En la web, las personas lo usan para crear varios efectos diferentes y veremos algunos ejemplos interesantes de shadow de caja a continuación. Por ahora, hablemos de cómo funciona en el nivel más elemental.
Caja básica de sintaxis de la sombra Al mirar un elemento con un tono de caja con herramientas de desarrollo del navegador, encontrará una marca como esta: Box Shadow: INSET 0 25PX 40PX 0 RGBA (0, 0, 0.3); Parece un poco complicado, ¿verdad? Pero no se preocupe, no necesita todas estas declaraciones todo el tiempo. Además, una vez que comprende cómo funciona, no parece tan confundido como al principio. Como puede ver anteriormente, la sombra de caja puede tomar hasta seis valores. Vamos a llevarlos sobre una fila. Offset-x El primer valor es la distancia horizontal de la sombra en el lado de su elemento de anclaje. Un valor positivo A un movimiento hacia la derecha, uno negativo a la izquierda. Puede usar todos los datos CSS habituales que indican la longitud para este valor, como PX, EM, VH y otros. Los más usados ​​son PX y EM.
Offset-y al igual que el anterior, pero para el eje vertical. El valor positivo mueve la sombra debajo del elemento, los negativos anteriores.

El rayo de desenfoque esto define la falta de clara de la sombra de la caja. Cuanto mayor sea el valor, más poco está claro será. Blur-Radius también toma todos los nombres de longitud CSS comunes, pero no valores negativos.

El rayo de propagación controla la propagación de la sombra más allá de la altura o ancho de su elemento. Cuanto mayor es la longitud, mayor es la propagación. También puede usar números negativos para ingresar la contracción.

El color, como probablemente puedas adivinar, esto te permite definir el color de la sombra de la caja de todas las formas habituales.Se observa con mayor frecuencia en valores hexadecimales (por ejemplo, #eded) o RGBA (por ejemplo, RGBA RGBA (46, 182, 142, 0.9)).Este último también le permite controlar la opacidad, que se usa comúnmente para las sombras. Recuerde, si no establece un color, el navegador usará el color del texto que se utiliza actualmente.Medallion Finalmente, puede agregar opcionalmente insertado al comienzo de la declaración.Esto cambia la sombra de una sombra a una sombra dentro del elemento.Aparece dentro del borde, sobre el fondo, pero bajo el contenido del elemento, por lo que no cubrirá ningún texto, por ejemplo.

El uso de valores en orden aquí es el orden en el que aparecen los valores de la propiedad de Shadow de caja. Shadow de caja: Offset-X offset-y blur-radius radadius-color insertado; Para asignar una sombra de la caja, necesita al menos dos longitudes de longitud. El navegador los usará automáticamente para Offset-X y Offset-Y. Si agrega un tercio, se interpretará como Blur-Radius, el cuarto como un radio de propagación. El recuadro y el color son opcionales y pueden ocurrir al final o al principio y en cualquier orden. El CSS a continuación tendrá el mismo resultado. Shadow de caja: 20px 20px 10px 0 Inset RGBA (0, 0, 0, 0.5); Shadow de caja: 20px 20px 10px 0 RGBA (0, 0, 0, 0.5) recuadro; Shadow de caja: recuadro 20px 20px 10px 0 RGBA (0, 0, 0, 0.5); Shadow de caja: RGBA (0, 0, 0, 0.5) 20px 20px 10px 0 Recuadro; Shadow de caja: RGBA (0, 0, 0, 0.5) recuadro 20px 20px 10px 0; Shadow de caja: inserte RGBA (0, 0, 0, 0.5) 20px 20px 10px 0; Asignando más sombras de la caja algo que no todos están al tanto es que puede configurar más sombras de caja para el mismo elemento. Para esto, simplemente proporcione más de un grupo de valores y los separe por coma.box -shadow: 20px 20px 10px 0 rgba (0, 0, 0, 0.5), -20px -20px 10px 0 oliva; El código anterior aparece de la siguiente manera:

También puede usar esto para crear líneas alrededor de los elementos. Para hacer esto, simplemente tiene que agregar más sombras en diferentes colores y compensar el desplazamiento y difuminar en cero. Shadow de caja: 0 0 0 20px RGBA (0, 0, 0, 0.5), 0 0 0 10px Olive; Resulta en contornos de diferentes colores:

Tenga en cuenta que esto no afecta el tamaño del modelo de caja, por lo que las sombras de cassette no se agregan al tamaño total de un elemento como margen o borde.
Compatibilidad del navegador La compatibilidad de la caja para la bandeja de caja no es realmente algo de lo que preocuparse. Es una propiedad CSS altamente establecida, aceptada por casi cualquier navegador, incluido el marcado, como el recuadro y las sombras múltiples. Para admitir versiones más antiguas de algunos navegadores, está acostumbrado a incluir el -webkit-box-hadow y -moz-box-hadow-hadow propiedades con los mismos valores. Sin embargo, para las últimas versiones de los navegadores más comunes, esto ya no es necesario.

Ejemplos de sombras para cajas CSS continúan, en este tutorial de Shadow de caja, queremos repasar algunos ejemplos de cajas CSS de sombras, para que pueda ver lo que es posible con esta propiedad. Pasaremos de las aplicaciones bastante estándar a las más extraordinarias porque, como puede ver, puede hacer cosas realmente interesantes con ellas.

Agregue una sombra a un botón Los botones son a menudo un elemento que tiene un tono de caja. Eso es porque es una buena manera de hacer que se destacen en la página. Después de todo, si incluye un botón, generalmente desea que la gente haga clic en él. Para pedirles que hagan esto, aquí hay un ejemplo simple de cómo se puede hacer esto con una sombra de la caja.
El marcado acompañante se ve así: Box-Shadow: 0px 11px 12px RGBA (0, 0, 0, 0.2); Sombra de caja suave Si desea crear una sombra de caja CSS relativamente suave, principalmente trabaja con desenfoque y se extiende mientras se ajusta a 0. De esta manera, la sombra no obtiene una forma distinta, sino que solo aparece fácilmente alrededor de los bordes.

Para lograr el efecto anterior, puede usar la siguiente marca: Box Shadow: 0 0 50px 10px #999; Esta es también una excelente manera de crear una sombra de caja en todos los lados de un elemento. Si desea hacerlo más distinto, simplemente aumente la propagación, reduzca la falta de claro y use un color más oscuro. Múltiples sombras de caja ejemplos finales Shadow son para el uso de más tonos simultáneamente. Esto ofrece diferentes posibilidades. En primer lugar, puede introducir una sombra fría y descolorida, en varias etapas. Es sorprendentemente simple: solo tiene que apilar las sombras de la caja sobre la otra, con huecos aumentados uniformemente, al tiempo que reduce la opacidad al mismo tiempo. Por cierto, cuando usa múltiples sombras de caja, es útil escribir declaraciones en filas separadas, en lugar de una sola declaración larga. Hace que sea mucho más fácil de entender.

Shadow de caja: 10px 10px rgba (0, 0, 0, 0.4), 20px 20px rgba (0, 0, 0.3), 30px 30px rgba (0, 0, 0, 0.2), 40px 40px rgba (0, 0, 0, 0, 0, 0, , 0.1), 50px 50px RGBA (0, 0, 0, 0.05); También puede llevar esto aún más al introducir las sombras de la caja blanca con un valor negativo del radio de propagación entre ellos, lo que resulta en la ilusión de varios elementos uno encima del otro.
¿Por qué el valor de la propagación negativa? Porque de lo contrario las sombras de la caja blanca cubrirían las que están debajo de ellas. El valor negativo los reduce para que el color posterior pueda brillar. A continuación se muestra la marca que necesita si desea ingresar un efecto similar en su propio sitio web: Box -Hadow: 10px 10px 0px -3px RGBA (255, 255, 255), 10px 10px RGBA (0, 0, 0 ,. 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 para varias sombras de cassette CSS es la forma mencionada anteriormente de establecer compensación y desenfoque a 0. Como hemos visto anteriormente, da como resultado un elemento con varios contornos, coloreados en este caso. Sin embargo, esto solo funciona porque el valor de radio spread aumenta para cada sombra de la caja. Si desea probar esto para usted, puede comenzar con esto: box-shadow: 0px 0px 3px rojo, 0px 0px 6px naranja, 0px 0px 0px 9px amarillo, 0px 0px 0px 12px verde, 0px 0px 15px azul, 0px 0px 0px 18px Indigo, 0px 0px 21px violeta; El mejor cuadro de generadores de caja, como describí, la sombra de caja tiene muchos valores. Por lo tanto, puede tomar un pequeño intento y error hasta que alcance el tipo de sombra deseado. Para ser más fácil, hay muchas herramientas degeneración de caja que le permiten jugar con sus controles, ver los resultados de inmediato y simplemente copie la marca una vez que esté satisfecho.

Estas son las mejores opciones para los generadores en forma de caja:

Box-hadow.dev-esta herramienta de unión tiene todas las funcionalidades que necesita y la mejor interfaz de usuario del grupo. Puede usar insertos, puede crear más sombras para cajas, puede controlar el tocador, desenfocar y extender por las diapositivas e ingresar los colores. Cuando esté satisfecho, haga clic en Mostrar código para copiar el marcado CSS. La única desventaja es que no proporciona código para los navegadores más antiguos. Le permite controlar las propiedades de la sombra de la caja a través de las diapositivas y también ingresar los números manualmente. Tiene su propio control de opacidad, lo cual es hermoso. Por otro lado, carece de la funcionalidad para varias sombras. El código de marcado que se incluye incluye navegadores más antiguos.

Box Shadow CSS Generator: una opción sólida que también tiene una capacidad de elección de color y le brinda el código para el navegador más antiguo. Puede copiarlo con un simple clic. Tiene control de opacidad, pero solo puede crear una sombra.
CSS3GEN CSS3 Box Generator de sombras: otro generador de sombras. Una característica interesante aquí es que, en lugar de los huecos X e Y, puede seleccionar el ángulo y la distancia de la sombra, y el instrumento hará el resto automáticamente. Por alguna razón, el radio de propagación y la inserción tienen su propio menú. El CSS puede copiar y los labios y simplemente incluir marcado para generaciones anteriores de navegador.