Selected side projects
A collection of experiments, competitions entries, personal projects or simply having fun.
Experimenting with CSS transforms
Vasarely in black & white
Digital version of a painting created by Victor Vasarely in 1957. The effect is created using a series of PHP for loops to create all the HTML divs. These are styled with an excessive amount of nth-child strings in CSS to target specific squares, and CSS transforms to change the shapes of them. This is the demo […]
Experimenting with CSS
Vasarely in colour
Digital version of a painting created by Victor Vasarely in 1963. It is too complex to do with just CSS. I needed a bunch of class names in the HTML for easier targeting via CSS. I figured out the patterns in the artwork first, convert these into PHP to create the required HTML with class […]
CSS & Web fonts
The rules are easy, pick one of three quotes from past Build conferences and let your typography inspiration run wild using HTML, CSS and web fonts. This is my entry. The web fonts are by Typekit. Some of the fancy typesetting is helped along with lettering.js.
HTML and CSS
Responsive Data Tables
HTML tables are a bit of a pain when it comes to responsive web design. A large table with lots of columns will look good on a wide screen, but on a small mobile screen they suck. This is the demo of the blog post about this. Responsive tabular data – tested in Chrome, Firefox, […]
CSS & Web fonts
Friday the 13th
As part of the 2012 New Adventures in Web Design conference I attended a workshop on Controlling Web Typography with Trent Walton. It was a half day full of tips and tricks you can use with type, HTML, CSS and jQuery. Best explained by giving an example: my attempt to re-create a movie title. The […]
What can you do with 10Kb
How far to the top of the world?
The competition sets you the challenge to design and build a web application of which the total size is no more than 10Kb. This application uses geolocation to determine where in the world you are and then calculates the distance between you and Mount Everest. You might think that’s not a very useful thing to […]