Uno de los proyectos más comunes hoy en día es crear una galería fotográfica o cualquier otro sistema que muestre de una manera impactante nuestras imágenes. Hoy os vamos a enseñar a hacerlo, utilizando una conocida librería de JavaScript.
Para desarrollar nuestra galería vamos a utilizar la biblioteca de JavaScript Grade.js la cual nos va a permitir:
Todo lo anterior lo crea con muy pocas líneas de código y de manera totalmente automática. Para mostraros cómo funciona, lo mejor es basarnos en el siguiente ejemplo que he creado.
Para realizar la demostración, se ha utilizado el siguiente código:
<!Doctype html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/grade-js/1.0.10/grade.min.js"></script> <style> div { float: right; margin: 10px; } img { height: 400px; width: 200px; } .gradient-wrap { padding: 40px; } </style> </head> <body> <div class="gradient-wrap"> <img src="angeles.jpg" /> </div> <div class="gradient-wrap"> <img src="avatar.jpg" /> </div> <div class="gradient-wrap"> <img src="elysium.jpeg" /> </div> <div class="gradient-wrap"> <img src="up.jpg" /> </div> <div class="gradient-wrap"> <img src="sincity.jpg" /> </div> <div class="gradient-wrap"> <img src="indiana.jpg" /> </div> <script type="text/javascript"> Grade(document.querySelectorAll('.gradient-wrap')); </script> </body> </html>
En el se hace lo siguiente:
El resultado obtenido es el siguiente:
Como podéis apreciar, cada imagen tiene un pequeño marco cuyo color es un degradado. Este degradado está construido sobre la base de los dos colores más dominantes de la imagen.
Espero que este artículo os haya gustado y si tenéis alguna duda o sugerencia, nos dejéis un comentario.
Un saludo
En los últimos tiempos no he podido escribir con toda la frecuencia que me gustaría,…
Uno de los problemas más comunes a los que se enfrentan los usuarios que empiezan…
Cuando empiezas un proyecto hay una serie de aspectos comunes que suelen ser resueltos mediante…
Si alguna vez has tenido que realizar un desarrollo de front-end seguramente te habrás dado…
Una vez que una persona ya ha aprendido lo básico sobre un lenguaje de programación,…
Hoy en día, un gran porcentaje de los proyectos que se desarrollan son páginas webs.…