TL;DR: Go check out the CSS3-based visualization of the CC license model (Chrome, Safari, or Firefox 4). Read below for details of why and how I built it.
We launched a refresh of the Creative Commons’ site design on Thursday. Part of that refresh was updating the content of some key pages, based on user feedback. We heard from users that the pages could be clearer, and could give better examples of what Creative Commons licensees are, how they’re used, and who’s using them. One of the pages we updated was the Licenses page, which provides an overview of the CC licenses.
When I was looking at the page on Thursday, I was particularly taken by the graphic Alex put together to show the three conceptual layers of a CC license: machine readable, human readable, and legal code. This concept is part of CC’s unique approach to public licenses since day one, but it’s something I’ve always struggled to describe in a way other than a lawyer joke (“get it? lawyers aren’t humans!”). Alex’s graphic seemed like a great, simple illustration of how the layers stack and complement one another. It also seemed like it was begging for an interaction implementation.
I was immediately reminded of the Mozilla Hacks columns about using
CSS3 Transitions to add interactivity to HTML content. Transitions
effectively let you say, “when this CSS property changes, don’t make the change
immediately; apply this function from the previous value to the new one, and
make the change take this long.” The result is the ability make elements fade in
new CSS class). CSS Transitions are still in development, so you wind up using
the vendor prefixed versions:
-o-transition. Coupled with CSS3 Transformations (which let you move,
skew, and rotate objects), you can achieve some really interesting effects.
Thursday afternoon at the end of the work day I sat down to read up on
Transitions and Transformations, and to see if I could make three isometric
squares stack on top of one another, like Alex’s graphic. (I found this
article particularly helpful in its clarity and directness.) Within about
30 minutes I had a working transformation and transition, using jQuery to
listen for click events, and applying a different CSS class on click. Alex
converted the graphic elements to an SVG I could pull apart, and Thursday
evening I started hacking, applying the SVG elements as the background on
<div>s, and writing additional CSS classes to show details about each layer.
One of the interesting challenges of putting this together was how to chain
transitions. In particular, when you first click the CC logo, we wanted it to
shift to an isometric projection, and then expand. While it was clear that we
needed to apply two different classes in sequence with a delay, we found the
jQuery’s .delay() call didn’t seem to work. In fact, using
seemed to cause the browser to skip the transition, and apply the new class
window.setTimeout did work.
I also ran into some issues with my SVG graphics. The first iteration apparently had some issues in the SVG exported from Illustrator. While they worked adequately in Firefox 4.0 beta 8, Chrome rendered them in a pixelated fashion, and Opera rendered them in a spectacularly broken manner. Removing the offending elements from the SVG and regenerating the individual images made them render smoothly in Firefox and Chome, and Opera also improved from broken to pixelated.
Overall this was a really fun experiment, and it was gratifying to see how support for these new specifications makes visually engaging pages really straightforward.