Articles & Tutorials

The articles and tutorials here are provided free of charge, and are fueled by caffeine.

Pure CSS Twitter Fail Whale

Pure CSS Twitter Fail Whale Click through to the full article to see a picture of the ever-vigilant Twitter ‘Fail Whale’ fully rendered using CSS.  If you’re using a Webkit browser (Safari or Chrome), it should also be animated using the webkit-animation CSS functions.  If you are viewing in IE8 or below, well, this isn’t an experiment for you.

The idea for this came to me this morning after being greeted first thing this morning by another Twitter outage.  I’d been looking for something to stretch my CSS muscles on, and the Fail Whale seemed perfect.  Also I think the animation only adds to his (or her?) charm.


Using relative font sizes

Relative font sizes are something that I’ve avoided for far too long due to bad experiences in the past, and being a picky designer who likes things pixel perfect. The new subcide design has seen me change to using em’s for all my text sizing, so that I can be sure that I’m setting a good example for everyone reading these articles.


How to debug CSS

This is not a tutorial. This will not tell you how to fix the problems you encounter. This is a list of guidelines that will help you identify what the problem is, so that you can take the steps you need to fix it. This guide has to be relitively vague, as its not about one specific problem, its about every problem you’re ever likely to encounter.


Creating a CSS layout from scratch

This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. I will try my best to explain the concepts behind each step, but a lot of the time other people have already covered these things better than I can. Because of this there will sometimes be links to more information on external sites.