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:
You might enjoy some of these eye-candy code samples:
http://code.google.com/p/css-shaders-graphics/
Thanks for the pointer Oswald.
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/
Thanks for sharing Azik. Very nice example. I’d recommend playing around with the CSS FilterLab to try out some of the other interesting shaders and experimenting with building some of your own.