The Quest for the Graphical Web was an experimental presentation we put together to tell the story of how the web is evolving from a graphical perspective. You can watch the full recording of the presentation from the Create the Web event. A web version can be viewed online at thegraphicalweb.com. We’ve also open-sourced the presentation on github.
For the presentation we wanted to show some key graphical features of the web along with newer features being implemented by Adobe’s own Web Platform team. Some of these features are still in the specification process so implementations can currently only be found in experimental or preview browser builds, like Chrome Canary. To show off these features we put together a cast of unique characters to represent each of the technologies used. In the story, our protagonist “Div” travels through an evolving landscape, where he meets “CSS”, who makes things colorful, and “SVG” who makes things more shapely. The journey then continues into outer space where we are introduced to “3D Transforms” who brings a new perspective on things, “2D Canvas” who shows some particle tricks, and an enigmatic “WebGL”. We then return home to explore some coming features like “Blend Modes”, with some ghostly overlay effects. Then wrap things up with “Shader Princess”, showing off the power of CSS Custom Filters. Each of the characters explains how they make the web a more graphical place.
CSS3 & SASS
Most of our characters are SVG elements that blink and move using CSS animations and transformations. These properties are applied to paths and elements inside the inline SVG (only currently supported by certain browsers). This allowed us to trigger animations and transition attributes of a character simply by appending or removing a class to the root element. We used SASS, a meta-language on top of CSS that compiles into CSS, which allows us to use variables, mixins, and to break out our CSS into different files. We used this in conjunction with Compass which provides a useful set of built in mixins, specifically helpful for CSS3 prefixed features, allowing you to write one line and then taking care of all the prefix variants for you. So, instead of writing:
-webkit-transition: transform .2s ease-in; -moz-transition: transform .2s ease-in; -o-transition: transform .2s ease-in; -ms-transition: transform .2s ease-in; transition: transform .2s ease-in;
We can just write:
@include transition(transform .2s ease-in);
For Canvas we used Processing.js to render a particle system, which switches between arrays of points to create animated transitions between shapes. We created a crude tool to draw target shapes allowing us to easily manipulate them for smooth transitions, which then exports these points in a format we could use. This is how we created a talking face animation made up of star particles.
A number of custom GLSL shaders were created for this project. We wrote a custom fragment shader to create the ambient glowing background of our WebGL scene. This fragment shader, along with the geometry in the scene was easily implemented with the Three.js library. We also wrote a custom vertex shader for our Custom Filters character to create wave-like oscillations similar to a stingray. The CSS for this element is below, referencing the individual vertex and fragment shaders as well as setting the attributes within them. We used CSS Animations to interpolate the states back and forth with easing for smooth motion. These shaders can be difficult to write so having a tool like CSS Filter Lab is really helpful in creating custom shaders.
-webkit-filter: custom(url(../assets/shaders/jelly.vs) mix(url(../assets/shaders/jelly.fs) multiply source-atop), 50 50 filter-box, transform translateY(-10px) rotateY(0deg) rotateX(60deg) rotateZ(170deg) scale(0.55), delta 1.0, backface 0.0);
We built a camera to manage the viewable HTML area by translating our scene element relative to the camera position with 3D transforms. This allowed us to slide, rotate and zoom the camera on all three axes. We managed the position and rotation of our “Div” character within the scene with this same approach. 3D support is not completely there for all browsers, for example, we found some implementation issues with Safari where rendered nested content in some scenarios don’t respect their transformation, and IE10 does not currently support transform-style: preserve-3d, meaning content within a container always layers based on the z-index of the attribute, so proper depth sorting with translate3d is out of the question.
We tried to pack a lot of different features into a colorful, creative demo, to show some fun uses of the technology. Feel free to check out the source on github and see how we put it together. Given the nature of the content it obviously doesn’t work great in every browser, but we thought it was a good test case to see how far the open web, as a design medium has come and we believe there’s still a lot of cool things on the way. We’re excited to see how the web community will continue to innovate with these and coming graphical features as the web platform continues to grow.