Tag Archives: webkit

It’s Curtains for You!

  October 9, 2012 - 2:04 pm |
1 Comment
Screen Shot 2012-10-09 at 2.18.55 PM

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…)

CSS FilterLab Detailed Walkthrough

  October 2, 2012 - 12:45 am |
3 Comments
Screen Shot 2012-10-02 at 12.43.16 AM

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…)

CSS Shaders & 3D

  August 9, 2012 - 5:03 pm |
1 Comment
Screen Shot 2012-08-09 at 5.28.27 PM

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…)

WebKit, and Filters, and Shaders! Oh, my!

  May 30, 2012 - 1:48 pm |
8 Comments
snapshot

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. (more…)