Escribimos esta entrada porque queremos recomendar algunos sitios útiles para agregar box-shadows rápidamente a tus elementos, mediante el uso de CSS.
Cómo ya sabrán la propiedad CSS box–shadow añade efectos de sombra alrededor del marco de un elemento, y ello puede ser de gran utilidad si queremos dotar los elementos de nuestro sitio web de profundidad; es decir, crear la idea de que éstos están a distintos niveles del fondo. Con ello también se puede dar una idea de proximidad, como si los elementos estuviesen más cerca, esto permite llamar la atención de los usuarios hacia elementos concretos.
Así por ejemplo, con el siguiente código css:
box-shadow: 20px 33px 15px -3px rgba(0,0,0,0.1);
Podemos lograr el siguiente efecto:
Pero digamos que tenemos esta situación; nos desempeñamos como freelancer y nos han dado un tiempo de entrega de 1 día para un landing page, así que tenemos algo de prisa, y nos urge agregar este efecto a un elemento específico. Acá es donde los sitios que hemos mencionado al principio entran en acción.
En el sitio web getcssscan.com poseen un apartado denominado Beautiful CSS box-shadow examples con 93 ejemplos listos para copiar y pegar en tu propio css con tan sólo 1 click. Todos esos box-shadows fueron copiados usando la herramienta del propio sitio web CSSScan, una forma muy inteligente y sutil de promocionar su servicio, proveyendo a la vez una herramienta bastante útil.
Lo mismo ocurre con el sitio web csshint.com donde también dedican una de sus páginas al mismo fin de la anterior, 76 tipos de sombras listas para copiar y pegar en nuestro código css. Genial, no lo creen?
La verdad es que en internet podemos encontrar diversos sitios web para generar box-shadows a medida, algunos ejemplos concretos son sitios web como box-shadow.dev o cssmatic.com que logran en teoría la misma función, pero son parametrizables. Generas tu propio box-shadow dependiendo de la opacidad, color, radio entre otros aspectos que requieras.
Son herramientas para tomarte un poco más de tiempo y crearlas a gusto, por supuesto, igual de útiles que las anteriores.
En conclusión, si estás buscando agregar un efecto box-shadow de manera rápida tendrás un poco más de 93 estilos para escoger y a sólo un clic de ser copiado. Si lo que deseas es agregar un estilo más personalizado, puedes recurrir a los generadores en línea. Box-shadow, una propiedad de css que puede hacer del elemento al que se aplique el protagonista de la sección en la que se encuentra.
Gracias por leernos, nos vemos en una próxima entrega.
