Podemos agregar una sombra a cualquier elemento HTML usando la propiedad CSS box-shadow. Así es cómo.
Agregar una sombra paralela básica
Primero configuremos algunos elementos HTML básicos para agregar nuestras sombras paralelas:
Box1 Box2 Box3 Luego agrega algo de CSS básico:
p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }El resultado son solo tres cajas negras a las que nos será fácil agregar sombras al llamar a sus identificaciones únicas:
Para agregar una sombra paralela básica, usemos la box-shadowpropiedad en el Cuadro 1:
/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Tenemos 3 parámetros aquí. Los dos primeros son, respectivamente, el desplazamiento xy el desplazamiento y. Establecieron la ubicación de la sombra paralela.
El desplazamiento es relativo al origen, que en HTML es siempre la esquina superior izquierda de un elemento. Un desplazamiento x positivo moverá la sombra hacia la derecha y un desplazamiento y positivo moverá la sombra hacia abajo.
El tercer parámetro es el color de su sombra paralela.
Tenga en cuenta que aunque usamos elementos aquí, la box-shadowpropiedad también se puede aplicar a cualquier otro elemento HTML.
Agregar un radio de desenfoque
Si queremos que la sombra se vea un poco más realista, querremos experimentar con el blur-radiusparámetro.
Este parámetro controla cuánto difuminar la sombra para que se vuelva más grande y más clara. Apliquémoslo al Cuadro 2:
/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
El valor de 4px establece el radio del desenfoque que se aplicará a nuestra sombra paralela.
Agregar un radio de propagación
Si queremos controlar el tamaño de la sombra, podemos usar el spread-radiusparámetro que controla cuánto crece o se encoge una sombra.
Agreguemos un radio de propagación de 8px al Cuadro 2:
/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
¡Recuerde el orden de estos parámetros!
Combinar varias sombras en una sola propiedad
Si queremos ser sofisticados, podemos agregar múltiples sombras paralelas a un elemento usando una sola box-shadowpropiedad.
Hagamos eso con el Cuadro 3 agregando simultáneamente una sombra paralela azul y verde:
/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
Bonificación: crea una sombra insertada
Si bien no creará una sombra paralela, el insetparámetro también se puede usar con la box-shadowpropiedad.
Como sugiere el nombre, este parámetro crea una sombra insertada (es decir, una sombra dentro de un cuadro).
El insetparámetro se puede colocar al principio o al final del
box-shadowpropiedad. Aquí demostramos su uso con un blockquoteelemento.
HTML:
The key to success is to start before you're ready. — Marie Forleo
CSS:
blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Por supuesto, puede agregar algo de desenfoque y extender para mejorar la sombra, o incluso varias sombras:
box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Con la box-shadowpropiedad, podemos hacer que los elementos de una página web se destaquen fácilmente para crear un bonito efecto de iluminación 3D.
Si quieres experimentar un poco por ti mismo, aquí tienes un lápiz de código que creé con los ejemplos utilizados en este tutorial.
¡Juega y mira qué se te ocurre!
¿Quiere ver más conocimientos y consejos sobre desarrollo web?
- Suscríbete a mi newsletter semanal
- Visita mi blog en 1000 Mile World
- Sigueme en Twitter