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.
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.
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.