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):
Check out this Pen!
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.
In a recent post I described a duotone CSS Custom Filter I had built that allowed you to take a black and white image, and remap the black and white colors to two other specified colors. Say you have a t-shirt website. You could provide a single black and white image, and users could choose the color they want.
In the original implementation I used CSS Custom Filters, which are a little overkill for this use, and they are currently only supported on Chrome. Here we’re going to do the same thing, using an SVG Filter. SVG Filters are currently supported on both Chrome and Firefox and stand a much better chance of being implemented in other browsers sooner rather than later.
In particular, we’re going to use the ComponentTransfer filter primitive, described in more detail in this post.
Let’s take a look at the following SVG implementation (best viewed on Chrome and/or Firefox):
Check out this Pen!
In the following demo:
Check out this Pen!
For both of these examples, click on the HTML, CSS and JS tabs to see what’s going on and let me know if you have any questions.
As you can see, SVG filters are extremely powerful and worth learning more about. Using them to manipulate HTML content is currently only supported on Chrome and Firefox but it looks very promising that they’ll be supported on all browsers before too long.
As you can read here, I’ve just open sourced gradientmaps.js, a library that allows you to apply Photoshop-like gradient maps to HTML content in Chrome and Firefox.
Now that the library is out there, let’s have a little fun. Continue reading
I’ve just released gradientmaps.js on Github. You can use this library to apply gradient maps to any HTML content using SVG filters. You can find all the details on the Adobe Web Platform team blog:
The library makes use of SVG filters. As indicated on this table of browser support for CSS graphics, applying SVG filters to HTML content is currently supported only on Chrome and Firefox at present.
Check it out, it’s a ton o’ fun.
I’ve been playing around with SVG Filters lately, and let me tell you, I’ve been having a ton of fun. The best part is, you don’t have to know a lot about SVG here. The filters, defined in embedded SVG can be applied to your HTML content with CSS. Once you figure out what filters are available, and how to configure them, it’s really straightforward. Continue reading
I don’t know about you, but I find that keeping track of what graphics-related CSS properties are supported in what browser, and under what conditions, and with which vendor prefix, is a little daunting. caniuse.com is extremely helpful for this, but it’s still not very easy to find out things like, ‘Under what conditions can I apply a clip path to HTML vs SVG?’ Chrome supports both -webkit-clip-path and clip-path. What’s the difference?
To answer this question, I’ve created a new GitHub repo: css-graphics
The repo consists of a simple table that attempts to answer these questions. Please, please, please, if you find this useful and you see some out of date or incomplete information, make the change and do a pull request. I’d love to see this kept up to date and kept useful.
Yes, I know the table is pretty sparse right now. I need to add information on CSS regions, compositing & blending, shapes and more. It would also be good to somehow specify if you have to turn on a custom flag to enable the feature. But don’t let me get in the way, please help me keep this up to date.
If you have some beautiful interactive SVG that you want to embed into your web page, the best option is generally to inline the SVG into the HTML itself. Then you have access to the SVG DOM and can provide all the interactive behaviors you can dream up. The problem is, if you have a large SVG file, your HTML quickly gets polluted with all of the SVG content. Continue reading