Cómo usar CSS box-shadow: 13 trucos y ejemplos

CSS es el lenguaje que usan los desarrolladores para diseñar una página web. Controla cómo se muestran los elementos HTML en una pantalla, en papel o en cualquier otro medio. CSS proporciona el poder de personalización completo para diseñar la página web en su propia imagen.

Puede cambiar el color de fondo de un elemento, el estilo de fuente, el color de fuente, la sombra de cuadro, el margen y muchas otras propiedades usando CSS. Lo guiaremos a través de algunos usos efectivos de box-shadow en esta guía.

¿Qué es CSS box-shadow?

La sombra de la caja La propiedad se utiliza para aplicar una sombra a los elementos HTML. Es una de las propiedades CSS más utilizadas para diseñar cuadros o imágenes.

Sintaxis CSS:

caja-sombra: [desplazamiento horizontal] [desplazamiento vertical] [radio de desenfoque] [radio de extensión opcional] [color];

1. desplazamiento horizontal: Si el desplazamiento horizontal es positivo, la sombra estará a la derecha del cuadro. Y si el desplazamiento horizontal es negativo, la sombra estará a la izquierda del cuadro.
instagram viewer
2. desplazamiento vertical: Si el desplazamiento vertical es positivo, la sombra estará debajo del cuadro. Y si el desplazamiento vertical es negativo, la sombra estará encima del cuadro.
3. radio de desenfoque: Cuanto mayor sea el valor, más borrosa será la sombra.
4. radio de propagación: Significa cuánto debe extenderse la sombra. Los valores positivos aumentan la propagación de la sombra, los valores negativos disminuyen la propagación.
5. Color: Significa el color de la sombra. Además, admite cualquier formato de color como rgba, hex o hsla.

Los parámetros de desenfoque, extensión y color son opcionales. La parte más interesante de box-shadow es que puede usar una coma para separar los valores de box-shadow tantas veces como desee. Esto se puede usar para crear múltiples bordes y sombras en los elementos.

1. Agregue una sombra de cuadro tenue a la izquierda, la derecha y la parte inferior del cuadro

Puede agregar sombras muy tenues a tres lados (izquierdo, derecho e inferior) del cuadro utilizando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

caja de sombra: rgba (149, 157, 165, 0.2) 0px 8px 24px;

Producción:

2. Agregar una sombra de cuadro tenue a todos los lados

Puede agregar sombras claras a todos los lados del cuadro utilizando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

caja de sombra: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

Producción:

3. Agregue una sombra de cuadro delgada a los lados inferior y derecho

Puede agregar sombras en la parte inferior y derecha del cuadro utilizando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

caja de sombra: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Producción:

4. Agregar una sombra de caja oscura a todos los lados

Puede agregar sombras oscuras a todos los lados del cuadro utilizando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

caja de sombra: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Producción:

5. Agregar sombra extendida a todos los lados

Puede agregar sombra extendida a todos los lados del cuadro usando el siguiente comando con su elemento HTML de destino:

sombra de caja: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

Producción:

6. Agregue una sombra de borde delgada a todos los lados

Puede agregar una sombra de borde simple a todos los lados del cuadro usando el siguiente CSS con su elemento HTML de destino:

caja-sombra: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px inserto;

Producción:

7. Agregue una sombra de cuadro a los lados inferior e izquierdo

Puede agregar una sombra en la parte inferior e izquierda del cuadro utilizando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

caja de sombra: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Producción:

8. Agregue una sombra de cuadro tenue a los lados superior e izquierdo, una sombra oscura a los lados inferior y derecho

Puede agregar una sombra clara en la parte superior e izquierda del cuadro, así como una sombra oscura en los lados inferior y derecho del cuadro utilizando el siguiente CSS con su elemento HTML de destino:

sombra de cuadro: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Producción:

9. Agregue una sombra de borde fina y coloreada a todos los lados

Puede agregar una sombra de borde de color simple a todos los lados del cuadro utilizando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

caja de sombra: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Producción:

10. Agregue sombras de borde de varios colores a los lados inferior e izquierdo del cuadro

Puede agregar sombras de borde de varios colores en la parte inferior e izquierda del cuadro utilizando el siguiente CSS con su elemento HTML de destino:

caja-sombra: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px inserto, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px inserto;

Producción:

11. Agregar sombras de borde de varios colores en la parte inferior

Puede agregar sombras de borde de varios colores en la parte inferior del cuadro utilizando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

sombra de caja: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0.1) 0px 20px, rgba (240, 46, 170, 0.05) 0px 25px;

Producción:

12. Agregue sombras de borde de varios colores a los lados inferior y derecho del cuadro

Puede agregar sombras de borde de varios colores en los lados inferior y derecho del cuadro utilizando el siguiente CSS con su elemento HTML de destino:

sombra de caja: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170, 0.1) 20px 20px, rgba (240, 46, 170, 0.05) 25px 25px;

Producción:

13. Agregue sombras claras a los lados izquierdo y derecho, extienda la sombra hacia la parte inferior

Puede agregar sombras claras a los lados izquierdo y derecho y extender la sombra al fondo del cuadro usando el siguiente CSS de sombra de cuadro con su elemento HTML de destino:

sombra de caja: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0.09) 0px 16px 8px, rgba (0, 0, 0, 0.09) 0px 32px 16px;

Producción:

Integrar CSS con una página HTML

Ahora que sabe cómo agregar efectos geniales de sombra de cuadro usando CSS, puede integrarlos fácilmente con elementos HTML de múltiples maneras.

Relacionados: 11 herramientas útiles para comprobar, limpiar y optimizar archivos CSS

Puede incrustarlo en la propia página HTML o adjuntarlo como un documento separado. Hay tres formas de incluir CSS en un documento HTML:

CSS interno

Las hojas de estilo internas o incrustadas se insertan sección de un documento HTML utilizando la elemento. Puede crear cualquier número de elementos en un documento HTML, pero deben incluirse entre los y etiquetas. A continuación, se muestra un ejemplo que muestra cómo utilizar CSS interno con un documento HTML:

Estilo 4

CSS en línea

CSS en línea se utiliza para agregar reglas de estilo únicas a un elemento HTML. Se puede utilizar con un elemento HTML a través del estilo atributo. El atributo de estilo contiene propiedades CSS en forma de "valor de la propiedad" separados por un punto y coma;).

Relacionados: Aprenda a crear sitios web bidimensionales con CSS Grid

Todas las propiedades de CSS deben estar en una línea, es decir, no debe haber saltos de línea entre las propiedades de CSS. A continuación, se muestra un ejemplo que muestra cómo utilizar CSS en línea con un documento HTML:

Estilo 4

CSS externo

CSS externo es la forma más ideal de aplicar estilos a documentos HTML. Una hoja de estilo externa contiene todas las reglas de estilo en un documento separado (archivo .css), este documento luego se vincula al documento HTML utilizando el etiqueta. Este método es el mejor método para definir y aplicar estilos a los documentos HTML, ya que el archivo HTML afectado requiere cambios mínimos en el marcado. Aquí hay un ejemplo que demuestra cómo usar CSS externo con un documento HTML:

Cree un nuevo archivo CSS con el .css extensión. Ahora agregue el siguiente código CSS dentro de ese archivo:

.Bóveda {
alineación de texto: centro;
}
.image-box {
bloqueo de pantalla;
margen izquierdo: automático;
margen derecho: automático;
caja de sombra: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

Por último, cree un documento HTML y agregue el siguiente código dentro de ese documento:

Estilo 4

Tenga en cuenta que el archivo CSS está vinculado con el documento HTML a través de etiqueta y href atributo.

Los tres métodos anteriores (CSS interno, CSS en línea y CSS externo) mostrarán el mismo resultado:

Haga que su página web sea elegante con CSS

Al usar CSS, tiene control total sobre el estilo de su página web. Puede personalizar cada elemento HTML utilizando varias propiedades CSS. Los desarrolladores de todo el mundo están contribuyendo a las actualizaciones de CSS, y lo han estado haciendo desde su lanzamiento en 1996. ¡Como tal, los principiantes tienen mucho que aprender!

Afortunadamente, CSS es amigable para principiantes. Puede obtener una excelente práctica comenzando con algunos comandos simples y viendo a dónde lo lleva su creatividad.

10 ejemplos simples de código CSS que puede aprender en 10 minutos

¿Quiere saber más sobre el uso de CSS? Pruebe estos ejemplos básicos de código CSS para empezar, luego aplíquelos a sus propias páginas web.

Leer siguiente

Sobre el Autor