El uso de efectos de sombra en el diseño web puede hacer que tus elementos HTML destaquen y adquieran una apariencia más atractiva. En este artículo, exploraremos dos formas populares de aplicar sombras a tus elementos en CSS: Box Shadow y Drop Shadow. Aprenderás cómo implementar estas técnicas para mejorar la estética de tu sitio web.
El código HTML
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow / Drop Shadow</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<img class="imagen1" src="url-de-tu-imagen">
<img class="imagen2" src="url-de-tu-imagen">
</div>
</body>
</html>El código CSS
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.imagen1 {
width: 350px;
box-shadow: 10px 8px 6px green;
}
.imagen2 {
width: 350px;
filter: drop-shadow(10px 8px 6px green);
}Box Shadow en CSS
El Box Shadow es una propiedad CSS que permite agregar sombras a los elementos HTML. Puedes controlar la ubicación, el tamaño y el color de la sombra para lograr el efecto deseado.
En este caso, hemos aplicado una sombra verde a la clase .imagen1. Los valores 10px, 8px y 6px controlan la posición de la sombra en relación con el elemento, mientras que green establece el color de la sombra. Puedes personalizar estos valores para adaptar la sombra a tus preferencias.
Drop Shadow en CSS
El Drop Shadow es una técnica similar al Box Shadow, pero con algunas diferencias clave. En lugar de aplicar sombra al elemento en sí, el Drop Shadow crea una sombra que sigue el contorno del elemento, lo que puede dar la impresión de que el elemento se encuentra por encima del fondo.
Al igual que con Box Shadow, puedes ajustar los valores para controlar la ubicación, el tamaño y el color de la sombra.
Conclusión
Agregar efectos de sombra a tus elementos HTML es una forma efectiva de mejorar la apariencia de tu sitio web. Ya sea que elijas Box Shadow o Drop Shadow, ambas técnicas te brindan la flexibilidad para personalizar las sombras de acuerdo con tus necesidades de diseño.
En resumen, en este artículo has aprendido cómo aplicar efectos de sombra en CSS utilizando Box Shadow y Drop Shadow. Ahora puedes experimentar con estas técnicas y darle un toque de estilo único a tus elementos HTML. ¡Dale vida a tus diseños web con sombras impresionantes!
