Grade.js: marcos de degradado para sus imágenes a través de JavaScript

Qué título tan voluminoso para una herramienta tan simplificada. Grade.js es una biblioteca de JavaScript que utiliza para enmarcar automáticamente sus imágenes. Lo interesante de eso es que el marco se compone de un degradado de los dos colores más dominantes de la imagen respectiva. Pero intente incluir eso en un titular …

Grade.js: resultados nítidos y fáciles de usar

Grade.js es el último proyecto del desarrollador Ben Howdle del Reino Unido. Ben está distribuyendo la biblioteca JavaScript de forma gratuita bajo la licencia MIT a través de Github. Puede conocer su funcionalidad en esta página de demostración.

Existen diferentes opciones para la integración en su proyecto. Puede descargar el script grande de 104 kb y cargarlo en su proyecto. También puede instalarlo a través de npmo utilice el enlace CDN proporcionado.

Usarlo es muy fácil. Primero, implementa el script y lo inicializa. Así, por ejemplo:

Luego, coloque un contenedor div alrededor de la imagen que desea enmarcar. Este contenedor está marcado con la clase «gradient-wrap».

Eso puede verse así:

Eso es. A partir de ahora, todas las imágenes de la página que estén en un contenedor con la clase «gradient-wrap», estarán equipadas con un marco como este:

Para hacerlo, JavaScript detecta los dos colores más dominantes de la paleta de colores de la imagen respectiva y crea un degradado adecuado. Es obvio que necesita colocar todas las imágenes en contenedores separados, ¿no es así?