CSS trickery with the Channel 4 logo

Back in 2008 I created a simple faux-3D effect in the vines on the Silverback website using nothing but HTML and clever CSS positioning of layered images. The background parallax is only noticeable when you resize the browser window — a subtlety that I love as it's a special little detail that a lucky few will be delighted to discover. Since then there has been a flurry of similar effects seen on other sites, many taking the technique on to further levels, and some of which I demonstrated in my presentation at SXSWi last year.

I have yet to find a practical use for the effect, but the point is more about experimentation with unusual web design methods than it is about practicality.

At Clearleft we've recently been working with Channel 4, and their 3-dimensional segmented logo got me thinking; was there something I could do with a bi-directional browser-resizing parallax to recreate some of their iconic channel idents in an interactive form on the web?

So one lunchtime, that's exactly what I did. The result is very playful, and once you get going it's hard to stop resizing the browser and zooming those blocks around! Give it a go:

View demo (then resize the browser window)

Channel 4 logo sliced up.

Inspiration for this came from these Channel 4 idents (the first one is very subtle, you need to look for it around the 30 second mark):

[youtube=http://www.youtube.com/watch?v=sbZ505w3U_k&hl=en_US&fs=1&]

[youtube=http://www.youtube.com/watch?v=R86_TLuI51w&hl=en_US&fs=1&]