Si es desarrollador web, probablemente haya leído toneladas de tutoriales sobre la propiedad CSS Box-Shadow .
Muchos tutoriales le enseñan cómo utilizar la propiedad box-shadow de CSS. Pero nunca te digas el poder supremo de la sombra de caja.
En este tutorial, aprenderá CSS box-shadow con ejemplos y elementos visuales completos . Para que nunca más tengas que visitar ningún otro tutorial.
Al final de esta guía, tendrá toda la información que necesita para crear un cuadro de sombra CSS eficaz para su próximo proyecto.
Sintaxis
Es importante aprender la sintaxis antes de sumergirse en proyectos de ejemplo.
Analicemos los valores que podemos utilizar en box-shadow:
sombra de la caja:
- Desplazamiento x: significa en la dirección x (horizontal)
- Desplazamiento y: significa en la dirección y (vertical)
- radio de desenfoque: intensidad del desenfoque (opcional)
- spread-radius: expande o aumenta el radio de la sombra (opcional)
- color: el color de la sombra del cuadro (opcional)
desplazamiento-x y desplazamiento-y
Escriba una sombra de cuadro CSS para el botón de registro. Debería agregar la sombra oscura en la dirección xey .
<a href="#"class="btn btn--1">Register</a>
.btn--1{
box-shadow: 5px 5px #000;
}
CSS box-shadow en la dirección opuesta
Escriba un código de cuadro oculto para el botón de inicio de sesión.
Debería agregar la sombra oscura en la dirección xey, pero debería estar en la dirección opuesta con valores negativos .
<a href="#" class="btn btn--2">Login</a>
box-shadow: -5px -5px #000;
Nota: En ocasiones, los desarrolladores de CSS escriben ruido adicional como:
sombra de cuadro: 5px 5px 0 #000;
El radio de desenfoque es opcional . Si no lo estamos usando, deberíamos omitirlo.
Sombra de cuadro CSS con efecto de desenfoque
Agregue el radio de desenfoque para el botón Registrarse.
<a href="#" class="btn btn--3">Signup</a>
box-shadow: 5px 5px 10px #000;
Sombra de cuadro CSS con radio de extensión
Agregue radio de extensión para el botón Registrarse
<a href="#" class="btn btn--4">Signup</a>
box-shadow: 0px 0px 5px 15px #000;
Sombra de cuadro CSS múltiple
Cree un botón Inscribirse ahora con múltiples cuadros de sombra.
<a href="#" class="btn btn--5">Enroll Now</a> box-shadow: 5px 5px 2px #000, 10px 10px 3px #fff;
Múltiples cuadros de sombra CSS con efecto de capa transparente
Agregue un efecto transparente al botón inscribirse ahora agregando el mismo color de fondo que el color de fondo del botón principal para el primer cuadro de sombra y luego, para el segundo, agregue el color que desee.
<a href="#" class="btn btn--6">Enroll Now</a>
box-shadow: 0 0 0 10px #FF5757, 0 0 0 20px #fff;
inserción de sombra de cuadro css
Escriba un código para agregar una sombra interna CSS para el "botón crear ahora".
<a href="#" class="btn btn--7">Create Now</a>box-shadow: inset 0 0 20px 0 #000;Establecer transparencia en el cuadro de sombra CSS
Puedes utilizar colores rbga() para hacer eso.
<a href="#" class="btn btn--8">Run Daily</a>
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
Solo fondo de sombra de cuadro CSS
<a href="#" class="btn btn--9">My Job</a>
box-shadow: 0 10px 10px -10px #000;
Ahora debería ser fácil para ti. No queremos agregar sombra en la dirección x:
sombra de cuadro: 0 10px #000;
Llevemos este ejemplo un poco más allá. El botón debería verse como si tuviera un cuadro subrayado con sombra.
sombra de cuadro: 0 10px 10px -10px #000;
Nota: Simplemente coloque el valor del radio de dispersión en el negativo del radio de desenfoque.
Generador de sombras de cuadros CSS
Hay varias herramientas diferentes para generar box-shadow , pero aquí tienes el enlace a una de ellas, que definitivamente te gustará.
Quiero que juegues con él, con el conocimiento que aprendiste, te ayudará a perfeccionar tus habilidades con más profundidad.
Ahora, como ejemplo, cree un efecto como agregar las sombras del cuadro a todos los elementos excepto al primer hijo. Bueno, puedes hacerlo con la combinación de :not css selector .
Eso es suficiente por hoy. Espero que este artículo te haya resultado útil y hayas aprendido un nuevo valor o enfoque.
Y si quieres ver los ejemplos en acción, visita nuestro code-pen: CSS box-shadow con ejemplos
Lo mismo ocurre con esto, traemos mucho más contenido sobre CSS.
