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.
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
Say you have a black & white image and want to display it in many different 2-color schemes.
Or you could use the new duotone CSS custom filter I’ve built. You can find the source for the new filter on Github here. Continue reading
My last post talked about how you can create a Photoshop-like soft blur effect with built-in filters. As I started reading more about how you would actually create that soft blur effect in Photoshop though, I realized that often you don’t want the soft blur to apply to people’s faces. You want to apply a layer mask which essentially punches through the soft blur around the central subject’s face to reveal the crisp underlying photo on the bottom layer. Continue reading
CSS Filters can be added to any element on your Web page to create some very nice effects. You can even add multiple filters to a given element to create some interesting combined effects. Continue reading
I recently went over to the cnet.com site and was confronted with an ad that really surprised me. The whole home page itself became a set of curtains that parted to reveal an ad from IBM. The texture of the curtains themselves was the home page. Of course, this was faked out with Flash. If you look carefully the curtain texture isn’t exactly what was on the page, but it’s close enough that you don’t really notice. But then I thought, I bet I could do that easily with CSS Shaders, and with the actual content as texture to boot. Continue reading
I’ve created a video below as a detailed walkthrough of the Adobe CSS FilterLab, from installation, to configuring & developing custom shaders, to collaborating with others on filter development. Before FilterLab, I used to describe custom shader development as essentially ‘programming in the dark’. No debug statements, no tracing, no nothing. Now you can visually interact with your shader and see realtime errors. That’s a huge leap forward.
If you have any interest in CSS Custom Filters, using or developing them, I couldn’t recommend FilterLab more. Continue reading
With reveal.js you can create fantastic looking presentations that run in your browser, driven purely with HTML/CSS/JS. Since you have full control over which browser you use when giving your own presentation, it’s not unreasonable at all to make use of some newer browser features that do not have full cross-browser support yet.
With that in mind, I created a reveal.js presentation that uses CSS Custom Filters to achieve some very compelling transitions. Continue reading
I’ve been giving several talks lately, talking about the different CSS standards Adobe is involved with, and the contributions we’re making to WebKit. In order to make things easy, I had created a single web page with links to various demonstrations. But I wanted something subtle on the link page itself that used CSS shaders in a way that would raise an eyebrow or two, to make people realize something different was going on here. Continue reading
Anyone playing around with CSS Shaders has probably discovered very quickly how difficult it is to debug your shader. There are no debuggers, no breakpoints, not even a simple console.log. Fortunately, I’ve found a few simple things you can do to prevent you from ripping your hair out. Continue reading
CSS Shaders are a new and relatively easy way to bring cinematic effects to the web. You can find out all about them on the ADC, on the Adobe & HTML site or you can read the actual W3 draft proposal. While there are many articles out there showing how to use shaders, actually building your own custom shader is another story. That’s what we’re going to do here. Continue reading