i10

The other week, during some time we had off work, Peer and I went to did a cultural expedition to the two Tates to see the Henry Moore, Chris Ofili and van Doesburg exhibitions. The last of these gave us the most inspiration: Peer was transfixed by the animated films, and I found plenty of typography and print design to keep me excited.

So here’s a quick attempt to reproduce one of the designs; it’s César Domela’s cover for the 4th edition of i10:

And here’s my attempt:

i10 as a web page

http://playground.matthewbutt.com/i10.htm

No terribly exciting techniques in this one: just web fonts and some use of nth-child.

Acknowledgments

Books

Fonts

Constructivism Part III

Today’s study is the cover of Generation X’s 1977 single, Your Generation:

Black, red and grey construction with 'Generation X' in bold white text

Here is my version:

http://playground.matthewbutt.com/generation.htm

Please forgive any inconsistencies in the font rendering: I couldn’t find an open-licensed font with quite the right geometry, so I fell back on Helvetica, which may render unpredictably on different platforms.

This composition uses a handful of blocks with multiple backgrounds:

  • The upper part of the image, which looks a little like the Polydor logo, is a pseudo-element with four backgrounds, from top to bottom:
    • The small red circle
    • A white masking area, which covers the lower halves of:
    • The large black circle
    • The red block on the side.
  • The title strip is actually an h1 (‘Generation’) with a span inside (‘X’). The stripes are hand-coded linear gradients, and the cross-hatching in the small square is two repeating gradient stripes laid on top of each other.
  • The red triangle is another pseudo-element, with a single, angled gradient background.

The key lesson from this exercise was how tricky it can be to get webkit gradients right. The -webkit-gradient syntax is much less intuitive than the -moz-xxx-gradient syntaxes, and the repeated gradient declaration is also something of a fiddle. As to angling the red triangle, I couldn’t be bothered with more trig, so I just used trial and error.

Acknowledgments

Books

CSS Seesaw

It’s Friday night, so not a big one tonight.

I thought I would have a quick play with CSS transitions, and nothing seemed a better demonstration than a seesaw.

Here it is (warning: this only works in Webkit browsers at the time of writing):

A red seesaw with a black ball on it, all balanced on a black pivot

http://playground.matthewbutt.com/seesaw.htm

This little animation uses two transitions: one to tip the seesaw back and forth, and the other to roll the ball from one end to the other. There were only two slightly complex matters here: I needed to brush up on my A-level trig to get all the distances right, and a little sleight of hand was in order to create the triangular pivot (fire up Firebug if you want to see how I did it).

There are a few small bugs: poor aliasing, and a ghost top border on the seesaw element, but they can wait for another day.

And now, goodnight!

Look mum: no images!

One of the downsides of specialising is leaving behind areas of knowledge you used to love. As I have specialised in the programming side of web development, I have found myself getting further and further away from working with HTML and CSS, and letting my markup skills get rather rusty.

Of course, over the last couple of years, all sorts of exciting things have been happening with HTML and CSS, as browsers implement more features of HTML 5 and CSS 3, and the skills and techniques I used to be able to boast of are now anything but cutting edge.

So I thought I should do something about it, and there’s no better way to deal with something like this than to have a good play around. The following pages are rendered entirely using HTML and CSS; no images were harmed in the preparation of these pages.

Note: these pages render correctly in Firefox 3.6 and Safari 4.0.4. They probably don’t work in older versions and are most definitely NSFIE.

Landscape

First, then, I thought I would have a bit of a play with web fonts, gradients and transformations. Here’s the result:

Pale blue sky with yellow sun made from the word 'sunshine' repeated 13 times; green earth fades to brown with 'earth' in large brown letters

http://playground.matthewbutt.com/landscape.htm

It took a little adjustment to get the rays of sunshine correctly positioned: the key was to position the transform origin at 50% of the height of the text.

Constructivism

Next I thought I would try my hand at a little faux-constructivist design. The simplicity and clear colours of constructivist design are perfect for online material, but the jaunty angles have always posed a major problem: either render the text as images, or give up. With CSS 3’s transformations, this is no longer a problem, and there’s scope for a Russian revival:

'Construction site' in red and black crosses at an angle with 'a page of experimental stuff'; six yellow-and-black blocks float above

http://playground.matthewbutt.com/construction.htm

Again, getting everything to line up took a little getting used to, and it boiled down to the same issue: getting the transform origin of every element in the same place, and then rotating around that point.

A real-world example: Magazine’s Touch and Go

Ok, my constructivist sketch isn’t exactly high design, so I thought I would find something that had already been done, and have a go at copying it.

Here is the cover of Magazine’s 1977 debut single, Touch and Go:

Five red and black blocks stand side by side but at different vertical positions; 'Magazine' runs through them; underneath 'touch and go' and 'goldfinger' are arranged asymmetrically

And here is a quick HTML version:

http://playground.matthewbutt.com/magazine.htm

The only advanced technique here is the use of web fonts, although I’ve made liberal use of the :nth-child pseudo-class to apply styles to the coloured panels. I have to confess to using a few non-essential spans for this one, but I think the result is pretty pleasing for an image-free page.

And that’s my lot for today. There’s plenty more excitement in the latest implementations of HTML and CSS, so I’ll post some more experiments when I have a moment.

Acknowledgments

Fonts

Books