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):

3 thoughts on “CSS trickery with the Channel 4 logo

  1. wow…
    so cool…actually I didnt know you did the silverback css as well..
    I tell u after 2 years that it was so inspiring from me that layout!
    many thanks and just red you going freelance.
    Best wishes!

  2. I am old enough to remember 1982 when Channel 4 started with the exploding colourful 4 logo. That was ahead of it’s time for computer graphics. Now seems dated.

    Great effect for CSS positioning, I had fun resizing the browser window to see the 4.

Comments are closed.