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

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?

los 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:

|_+_|
  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.
  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:

|_+_|

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:



|_+_|

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:

comprobar el correo electrónico de icloud en el teléfono android
|_+_|

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:

|_+_|

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:

|_+_|

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:

|_+_|

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:

|_+_|

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:

|_+_|

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:

|_+_|

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:

|_+_|

Producción:

cómo borrar cosas en el calendario

|_+_|

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:

|_+_|

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:

|_+_|

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:

|_+_|

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.

Relacionado: 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:

|_+_|

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 'El valor de la propiedad' separados por un punto y coma ; ).

Relacionado: 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:

|_+_|

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:

|_+_|

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

cómo detener las llamadas no deseadas en teléfonos fijos
|_+_|

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. 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 apto para principiantes. Puede obtener una excelente práctica comenzando con algunos comandos simples y viendo a dónde lo lleva su creatividad.

Cuota Cuota Pío Correo electrónico 10 ejemplos de código CSS simples que puede aprender en 10 minutos

¿Necesitas ayuda con CSS? Pruebe estos ejemplos básicos de código CSS para empezar, luego aplíquelos a sus propias páginas web.

Leer siguiente Temas relacionados
  • Programación
  • Web Design
  • CSS
Sobre el Autor Yuvraj Chandra(60 Artículos publicados)

Yuvraj es estudiante de licenciatura en Ciencias de la Computación en la Universidad de Delhi, India. Le apasiona el desarrollo web Full Stack. Cuando no está escribiendo, está explorando la profundidad de diferentes tecnologías.

Más de Yuvraj Chandra

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse