An Interest In:
Web News this Week
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
Some of Our Sources
- Engadget
- Technology Review
- Simplebits
- Web Designer Wall
- The Logo Smith
- You The Designer
- Reencoded
- Wal You
- Android Dissected
- Daily Now
Help Webnuz
Referal links:
October 4, 2016 01:00 pm GMT
Original Link: http://feedproxy.google.com/~r/Noupe/~3/rpbu1d7p-Ws/grade-js-gradient-frames-99032.html
Grade.js: Gradient Frames for Your Images Via JavaScript
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: 1 2 3 4 5 6 7 8 9 10 11 <script src="path/to/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ /* A NodeList of all your image containers (Or a single Node). The library will locate an <img /> within each container to create the gradient from. */ Grade(document.querySelectorAll('.gradient-wrap')) }) </script> Then, place […]Original Link: http://feedproxy.google.com/~r/Noupe/~3/rpbu1d7p-Ws/grade-js-gradient-frames-99032.html
Share this article:
Tweet
View Full Article
Noupe
Noupe passionately delivers stylish and dynamic news for designers and web-developers across the globe on all subjects of designMore About this Source Visit Noupe