Reveal.js with CSS Custom Filters

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.

In order to view the CSS Shader transitions in the presentation, you need to use Google Chrome Canary with CSS Shaders enabled. Navigate to about://flags and turn on CSS Shaders.

The presentation itself gives a very brief overview of shaders and how you can use them to achieve cinematic effects with your HTML content.

If you’re running Google Chrome Canary with CSS Shaders enabled, you can view the actualy presentation here: http://awgreenblatt.github.com/reveal-shaders/

Otherwise, you can view a video of the beginning of the presentation below:

You can find the source to the presentation on Github at:

https://github.com/awgreenblatt/reveal-shaders

Tagged , , , , , , . Bookmark the permalink.

6 Responses to Reveal.js with CSS Custom Filters

  1. Oswald says:

    You might enjoy some of these eye-candy code samples:
    http://code.google.com/p/css-shaders-graphics/

  2. Hi folks, I’ve created an experiment using CSS filters and Google maps. Demo: http://iweb.uz/azik/interactive-globe-with-css-shaders-and-google-maps/

  3. qgustavor says:

    Can you use prefix-free, please? Since new browsers will accept this, not only Chrome.

    • agreenblatt says:

      I can do that, but in order to get custom filters to work, you need the -webkit prefix for now. The only browser that currently supports custom filters is Chrome at present, and it requires the -webkit prefix for custom filters.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>