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 propiedad box-shadow 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:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- 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.
- 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.
- radio de desenfoque: cuanto mayor sea el valor, más borrosa será la sombra.
- 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.
- 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:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Producción:
2. Agregue 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:
box-shadow: 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:
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Producción:
4. Agregue una sombra de cuadro 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:
box-shadow: 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:
box-shadow: 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:
box-shadow: 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 inset;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:
box-shadow: 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:
box-shadow: 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:
box-shadow: 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:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;Producción:
11. Agregue sombras de borde de varios colores a 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:
box-shadow: 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:
box-shadow: 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:
box-shadow: 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.
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 dentro de la sección <head> de un documento HTML mediante el elemento <style> . Puede crear cualquier número de elementos <style> en un documento HTML, pero deben incluirse entre las etiquetas <head> y </head> . A continuación, se muestra un ejemplo que muestra cómo utilizar CSS interno con un documento HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS box-shadow</title>
<style type="text/css">
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
</style>
</head>
<body>
<div>
<h2 class="heading">Style 4<h2>
<img class="image-box" src="MUO.jpg">
</div>
</body>
</html>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 atributo de estilo . El atributo de estilo contiene propiedades CSS en forma de "propiedad: valor" separadas por un punto y coma ( ; ).
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:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS box-shadow</title>
</head>
<body>
<div>
<h2 class="heading" style="text-align: center;">Style 4<h2>
<img src="MUO.jpg" class="image-box" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin-left: auto; margin-right: auto;">
</div>
</body>
</html>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 mediante la etiqueta <link> . 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 la extensión .css . Ahora agregue el siguiente código CSS dentro de ese archivo:
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 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:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS box-shadow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h2 class="heading">Style 4<h2>
<img class="image-box" src="MUO.jpg">
</div>
</body>
</html>Tenga en cuenta que el archivo CSS está vinculado con el documento HTML a través de la etiqueta <link> y el atributo href .
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. 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.