Efecto de sombra de caja en CSS

Mejorar la experiencia del usuario de su sitio web juega un papel vital en la atención del usuario. Hay múltiples formas que puede usar para realizar esta tarea. Una forma obvia es embellecer el aspecto general de su sitio web y eso se puede hacer agregando colores, imágenes, animaciones en el sitio web. Otra cosa interesante que puede mejorar el aspecto del sitio web es varios tipos de efectos de sombra. En CSS, hay dos tipos de efectos de sombra que son Shadow de texto y sombra de caja. En este artículo, te contaremos todo sobre el efecto de la bandeja de la caja.

Sombra de caja CSS

Con el fin de agregar sombras a varios elementos HTML, use la propiedad de la bandeja de la caja. A continuación, hemos demostrado varias formas que puede usar para agregar Shadow a sus elementos HTML.

Agregar sombra horizontal y vertical

Para agregar un efecto de sombra en un cierto elemento horizontal y verticalmente, simplemente proporcione valores tanto a las dimensiones de la propiedad de la sombra de la caja. Considere el siguiente ejemplo.

Html

Efecto de sombra de caja de aprendizaje

Aquí simplemente estamos creando un elemento div para demostrar el concepto del efecto de la sombra de la caja.

CSS

div
Ancho: 250px;
Altura: 150px;
relleno: 10px;
Color de fondo: Bisque;
Shadow de caja: 9px 9px;

Usando CSS, proporcionamos algo de ancho, altura, acolchado y color de fondo al elemento Div. Por último, utilizando la propiedad de la bandeja de caja, hemos dado 9px a las dimensiones horizontales y verticales de la sombra. Tenga en cuenta que la sombra tendrá el mismo color que el texto presente dentro del elemento div.

Producción

Se agregó una sombra horizontal y vertical al contenedor div.

Agregar color a la sombra

Como ya se mencionó, por defecto, el color de la sombra será el mismo que el del contenido presente dentro del elemento, sin embargo, puede cambiar su color especificándolo en la propiedad de shadow de caja. Use el siguiente fragmento de código.

CSS

div
Shadow de caja: 9px 9px Lightseagreen;

Aquí hemos especificado el color de la sombra.

Producción

Se agregó una sombra de luz de luz a la caja.

Agregue un efecto desenfoque a la sombra

Con el fin de agregar desenfoque a la sombra, especifique la intensidad de desenfoque en la propiedad de la sombra de la caja. Sigue el ejemplo a continuación.

CSS

div
Shadow de caja: 9px 9px 7px RGB (32, 178, 170);

Hemos establecido la intensidad de desenfoque en 7px. Tenga en cuenta que el efecto desenfoque aumenta a medida que aumenta la intensidad de la desenfoque.

Producción

Se agregó un efecto desenfoque con éxito.

Alterar el tamaño de la sombra

Para alterar el tamaño de la sombra, puede especificar la intensidad de propagación de la sombra. La intensidad de propagación básicamente define la propagación de la sombra en lugar del tamaño. Así es como lo haces.

CSS

div
Shadow de caja: 9px 9px 7px 10px Lightseagreen;

En el código anterior, primero hemos establecido las dimensiones horizontales y verticales de la sombra a 9px, entonces hemos establecido la intensidad de desenfoque en 7px y finalmente especificó la intensidad de propagación como 10px.

Producción

Se aplica una sombra con una intensidad de propagación específica como se desea.

Nota: Para disminuir la propagación de la sombra, asigne valores negativos al radio de propagación.

Todos los ejemplos mencionados anteriormente están demostrando cómo agregar una sombra externa a un elemento. Sin embargo, también puede agregar una sombra interna a un elemento.

Agregar una sombra interna

Para este propósito, simplemente inserte un parámetro insertado en la propiedad de la sombra de la caja. Siga el fragmento de código a continuación:

CSS

div
Shadow de caja: Recuadro 9px 9px 7px Lightseagreen;

Además de definir el tamaño, el radio desenfoque y el color de la sombra, hemos transformado la sombra externa en una interior usando "recuadro".

Producción

Se agregó una sombra interior con éxito.

Agregar múltiples sombras

Para agregar numerosas sombras en un elemento, puede agregar una lista de sombras a la propiedad de sombra de caja separada por comas. Aquí hay un ejemplo.

CSS

div
Shadow de caja: 6px 6px LightSeagreen, 8px 8px Lightalmon, 12px 12px LightskyBlue;

Aquí estamos agregando tres sombras diferentes, cada sombra tiene un tamaño y color específicos.

Producción

Se agregaron con éxito múltiples sombras con éxito.

Tener el conocimiento del radio de propagación, la sombra interior y las sombras múltiples puedes hacer otra cosa divertida con las sombras. Considere el ejemplo a continuación.

CSS

div
Shadow de caja: inserción 6px 6px 10px slighteagreen,
Inset -6px -6px 10px LightsLategrey;

En el código anterior, estamos agregando dos sombras internas en el mismo elemento, pero ambas sombras tienen diferentes posiciones y colores.

Producción

Se han agregado dos sombras internas con éxito.

Conclusión

Con el fin de agregar una sombra al elemento HTML, se utiliza la propiedad CSS Box-Shadow. Debe especificar la longitud de la dimensión horizontal y vertical de la sombra en la propiedad de la bandeja. También puede agregar color y un efecto desenfoque a la sombra de un elemento. Aparte de esto, la propiedad de la bandeja de caja le permite mejorar la propagación de una sombra o agregar una sombra interna a un elemento. Este tutorial está diseñado para guiarlo sobre varias formas que se pueden usar para agregar una sombra a un elemento.