Grade.js: Easy to Use, Neat Results
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:
1 2 3 4 5 6 7 8 9 10 11
Then, place a container div around the image you want to frame. This container is marked with the class "gradient-wrap".
That can look like this:
1 2 3 4
<!--the gradients will be applied to these outer divs, as background-images--> <div class="gradient-wrap"> <img src="./samples/finding-dory.jpg" alt="" /> </div>
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:
Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)