- Advertisement -
VPS House Servers
VPS House Servers
VPS House Servers

What a bulky title for such a streamlined tool. Grade.js is a JavaScript library that you use to automatically frame your images. The interesting thing about that is that the frame is made up from a gradient of the two most dominant colors of the respective image. But try fitting that into a headline…

Grade.js: Easy to Use, Neat Results

Grade.js is the latest project of developer Ben Howdle from the United Kingdom. Ben is distributing the JavaScript library for free under the MIT license via Github. You can learn about its functionality on this demo page.

There are different options for the integration into your project. You can download the 104kb large script, and upload it onto your project. You could also install it via npm, or use the given CDN link.

Using it is very easy. First, you implement the script and initialize it. Like this, for example:

Then, place a container div around the image you want to frame. This container is marked with the class “gradient-wrap”.

- Advertisement -
VPS House Cloud Servers
VPS House Cloud Servers
VPS House Cloud Servers

That can look like this:

That’s it. From now on, all of the page’s images that are in a container with the class “gradient-wrap”, will be equipped with a frame like this one:

gradejs-demo

To do so, the JavaScript detects the two most dominant colors from the color palette of the respective image, and creates a suitable gradient. It’s obvious that you need to place all images in separate containers, isn’t it?

- Advertisement -

There are no comments yet

  • Hello, guest