Liverpool Fixtures 2010-11 in CSS3 and HTML5

posted on January 12th, 2011 by Anthony

Yesterday I nosed in on a Twitter conversation between My Cole Henley (@cole007) and Mr Si Jobling (@Si).

I’m a Liverpool fan so I will excuse the Man United leanings. It was in reference to a quite nice poster depicting the fixtures for different Premier League team for the 2010-11.

It’s a pretty little thing, taking a nice large scale typographical approach to something that is usually displayed on a tiny little fold out piece of card. It was produced by 777 and all the proceeds went to SoccerAid.

Overall though it was Si’s challenging tweet reply that got me thinking. Si mentioned that using Canvas would be necessary and I thought I could make that in just HTML5 and CSS3.

So I did, go and have a look!

I’ve used CSS3… well vendor prefixes… and HTML5 as the framework, and sprinkled on some webfonts using Googles system. There’s not a single image on the page, or any canvas shenanigans.

A bit of detail

It seems to work great in Webkit based browsers, and it mostly works in Firefox too, though not as tidily yet.

Feel free to have a snoop around the code. The slanty effect is achieved simply enough by applying Webkit transformations, a -6 degree rotation followed by a -6 degree skew to straighten out the edges.

The rest is fairly straight forward floating and absolute positioning, with a cheeky bit of z-index.

One thing I had noticed was a bit of dodgy aliasing on the straight lines introduced by the rotation. At first I thought this was just a ‘feature’ of the rendering engine. You can still see evidence of it on some of the teams.

Then I remembered a fix for a similar problem when using border-radius and te background peeping in from behind (thanks to @davemcnally for this one). By using -webkit-background-clip you can coax things into looking a bit smoother.

Not having any spare cash to spend on Typekit or Fontdeck at the mo I used the free and easy to use Google web font system. And it is easy, taking literally seconds to get working. Though I probably look at getting the JavaScript loader thing working to stop the Flash Of Unstyled Text.

Just for a bit of practice I’ve used HTML5 tags. I’m not sure it’s perfect in it’s execution, but it’s good to get used to using it.

So there you go. Hopefully it might be an inspiration to some of you, maybe even helpful! I enjoyed messing about with it anyway.