I’ve been writing a few posts about the new gradientmaps.js library, and it occurred to me that gradient maps are a little hard to get your head around. How would you use them in a real-world scenario? From a pure creativity standpoint, they’re a no-brainer. But are there any practical use cases?
Here’s a thought. Say you’re selling shirts on your website. You’re able to print the shirts in a myriad of colors and want to let the consumer pick the color they want. In order to implement this, you could have an image for every possible color, or you could do the following (only works in Chrome & Firefox at present, sorry):
In the above example, when you click on the color button and select a color, that new color is used as the right edge of a color gradient which starts with black. So, if you choose red, the color gradient will go from black to red. The image of the shirt you see has a transparent background. And, if you’ll notice if you look at the JS tab, the start of the gradient is actually transparent itself “rgba(0, 0, 0, 0)”. This is so we don’t recolor the background itself.
The resulting gradient is then applied to the image using:
gradientmaps.js makes use of SVG filters being applied to HTML content. At present that is only supported on Chrome and Firefox.
Pretty easy, and pretty useful. Play around with it and let me know what you think.