HTML es el lenguaje utilizado para proporcionar la estructura de las páginas web, y CSS nos permite aplicar estilos a los elementos. En una página web, se establecen diferentes valores de propiedades para aplicar diferentes estilos, como color de fondo, tamaño de fuente, borde, radioradio y sombra de caja es uno de ellos.

Este blog discutirá el método para aplicar los efectos de la sombra a los elementos HTML.

Cómo dejar caer el efecto de sombra en los elementos HTML usando CSS?

El "sombra de la caja"La propiedad agrega una sombra alrededor de un elemento donde dos o más valores de efecto adicionales pueden separarse por comas.

La sintaxis de la propiedad de la bandeja se describe a continuación.

Sintaxis

Shadow de caja: Ninguno | H-OFFSET V-OFFSET BLUR Color de propagación de difusión | Recuadro | Inicial | Hereder;

La descripción de la sintaxis mencionada anteriormente se enumera a continuación:

• "ninguno": Es el valor predeterminado de la propiedad de bandeja.
• "OFFSET": Este valor representa la distancia horizontal.
• "compensación de V": Este valor define la distancia vertical.
• "difuminar": El tercer valor es un borrón. Maximizar su valor maximizará el efecto de desenfoque.
• "desparramar": El cuarto valor representa la extensión de la sombra. Puede contener valores positivos o negativos, donde el valor positivo aumenta la propagación, y un valor negativo lo disminuye.
• "color": Este valor es opcional, que representa el color actual.
• "inicial": Este valor establece la propiedad de su valor inicial.
• "heredar": Este valor hereda la propiedad de su elemento principal.
• "recuadro": El valor de inserción se usa para hacer sombras dentro de la caja.

Veamos cómo mira el efecto de la sombra a través de un ejemplo práctico.

Ejemplo

En el archivo HTML, primero, agregue un "". Dentro de este elemento, agregue

y

Etiquetas para proporcionar contenido a la página web.

Html

La sombra de la caja

Shadow de caja: 3px 8px

Ahora, aplique las propiedades CSS a los elementos HTML agregados.

CSS

div
Shadow de caja: 3px 8px;

El elemento div se aplica con la propiedad "sombra de la caja"Con el valor"3px 8px", Que representa el desplazamiento horizontal y el desplazamiento vertical.

Producción

En la siguiente sección, los elementos HTML se diseñarán con diferentes propiedades.

CSS

div
borde: 5px sólido RGB (255, 111, 1);
Shadow de caja: 3px 8px 9px 4px #f4af1b;

Las siguientes son las propiedades CSS adicionales aplicadas al elemento DIV:

• "bordeSe asigna a la propiedad al valor 5px RGB sólido (255, 111,1) donde 5px indica el ancho del borde, el sólido representa el estilo del borde y RGB (255, 111, 1) es el color.
• "sombra de la cajaLa propiedad "con el valor 3px 8px 9px 4px #F4AF1B Representa la compensación H como 3px, el V-ofset como 8px, borroso como 9px, extendido como 4px y #F4AF1B especifica el color.

El código anterior se mostrará el elemento DIV como se muestra a continuación:

Ahora, en la siguiente sección, cree dos cuadros que representan dos elementos DIV. Le daremos a cada uno con diferentes valores de sombra de caja múltiples y observaremos los resultados.

Html

La sombra de la caja

Shadow de caja: 3px 8px 9px 4px #f4af1b

La sombra de la caja

Shadow de caja: 3px 8px 9px 4px #f4af1b

Estilo Box1 Div

#Box1
Ancho: 40%;
Altura: 140px;
borde: 5px sólido #ff9c83;
Shadow de caja: 8px 10px 15px 20px #807f7f;

Aquí:

• "#Box1"Se usa para acceder al DIV con ID Box1.
• "anchoLa propiedad se utiliza para la configuración del ancho del elemento.
• "altura"La propiedad establece la altura del elemento.
• "borde"Se le da valor 5px sólido #ff9c83 donde 5px indica el ancho del borde, el sólido representa el estilo del borde y #ff9c83 es ​​el color.
• "sombra de la caja"La propiedad se establecerá como"8px 10px 15px 20px #807F7F"Donde 8px es un desplazamiento horizontal, 10px es un desplazamiento vertical, 15px es el efecto desenfoque, 20px es el efecto de propagación y #807F7F es el color de la sombra.

Estilo Box2 Div

#Box2
Ancho: 40%;
Altura: 140px;
borde: 5px sólido RGB (255, 111, 1);
Shadow de caja: Recuadro 4PX 8PX #F4AF1B;
margen izquierda: 350px;

Se puede observar que hemos diseñado el Box2 Div con las mismas propiedades:

Consejo de bonificación: agregar múltiples sombras en el elemento HTML

El "sombra de la cajaLa propiedad se puede utilizar para agregar múltiples efectos de sombra a un elemento HTML. Esto se puede hacer usando comas entre cada sombra como se muestra en el siguiente ejemplo:

Shadow de caja: 6px 6px RGB (91, 0, 143), 12px 5px RGB (201, 8, 8), 16px 16px 8px RGB (226, 213, 29);

Como puede ver, se han aplicado con éxito múltiples sombras:

Eso fue todo sobre el uso de la sombra de la frontera de CSS.

Conclusión

El "sombra de la cajaLa propiedad en CSS se utiliza para aplicar efectos de sombra a los elementos HTML. Esta propiedad consta principalmente de dos valores que son para compensaciones horizontales y compensaciones verticales, pero puede haber múltiples valores como el efecto de desenfoque, el efecto de radio de propagación, el color y más. Además, también puede agregar múltiples sombras a los elementos utilizando comas entre cada propiedad de shadow de caja. Este artículo ha explicado la propiedad CSS Box-Shadow con ejemplos prácticos.