With Canvas blending now in Chrome Canary, WebKit Nightly and Firefox, it’s a good idea to start getting your head wrapped around this spec. It seems to be moving along nicely and is starting to show up in more and more browsers. (more…)
It can often take several years for a W3C spec to go from initial submission (a W3C member submitted a suggestion for a Web standard) to final recommendation status. Often though, a spec is split up into multiple independent specs to allow each spec to evolve independently, and hopefully faster.
This is what recently happened with the CSS Exclusions & Shapes Specification. Exclusions and Shapes are in fact two independent features. Different people could and should therefore be working on the two specs independently rather than having everyone make decisions about both features. So now we have CSS Exclusions and CSS Shapes. (more…)
Say you have a black & white image and want to display it in many different 2-color schemes.
You have a few options here. You could draw the image in a canvas and then use JavaScript to manipulate each pixel. Or you could in theory convert your black & white image to SVG and then use CSS to manipulate the colors. That’s probably a pretty decent solution.
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. (more…)
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. (more…)
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. (more…)
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. (more…)
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. (more…)
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. (more…)
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. (more…)
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. (more…)