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

Two firsts

Yesterday as I left work there was still a faint suggestion of twilight in the clear evening sky and, as I cycled through the park, the gate into Kensington Gardens was open for the first time this year.

Of course, today it’s been snowing, so winter isn’t over yet; but it’s good to know that spring is creeping up on us!

Kämmer Klang, 20100202

Off last night to Dalston for Kämmer Klang at Café Oto for what seems to be a typically diverse evening of performance.

Most intriguing were Kerry Yong’s two solo performances, which were billed as part of a series entitled Cover Me Casio in which he reworks existing compositions on a Casio keyboard with the aid of various effects pedals and electronics. First of these was a movement from Madrigale by Aldo Clementi, the very point of which is the gradually retarded repetition of a handful of short, distinct melodies. Most of the time it was impossible to correlate what Kerry was doing on the keyboard with the noises coming out of the speakers, and, as he was using a delay pedal and a laptop, it is hard to know which piece of equipment was responsible for which effects. The result, however, was charming and fascinating, and I think I’m going to have to do some research on these programming techniques now.

Kerry’s second solo performance was an reworking of Messiaen’s ‘Dance of Fury for the Seven Trumpets’ from his Quartet for the End of Time.The movement is Messiaen at his most muscular, whose highly characteristic melodies use his modes of limited transposition and added-value rhythms, and are gradually metamorphosed by rhythmic distortion and octave displacement. The entire movement is played at the unison or octave, which adds to the starkness of the piece. Kerry introduced his performance by declaring that this movement was a ‘good excuse for a colour trip’, and went on to prove this assertion, using an array of effects pedals to distort l and manipulate the sound of his synthesiser to create an impressive range of timbres and textures.

In both of these pieces I enjoyed the way Kerry used equipment which is usually the preserve of rock bands, but produced new and wonderful noises which seemed entirely appropriate for the pieces he was performing.

The other excitement of the evening was the improvisation set by Roger Turner on drum set and percussion, Alan Tomlinson on trombone and Steve Beresford on electronics. Alan had warmed up earlier in the evening with a performance of a piece by Xenakis, which had already showed off the range of his instrument, and he took this even further in this set, even turning a coughing fit (he was suffering with a chest cold) into a new source of noises and expressions. Roger’s percussion was equally adventurous, and he produced some fascinating sounds by scraping and rubbing various instruments, conventional and un-, against each other. Steve’s electronics provided a fitting counterpoint to the two acoustic performers, but after Kerry’s antics I spent more time observing them than him.

Kämmer Klang has a good format: it’s a little more formal and less gregarious than Non Classical, but the salon style of the evening, with several performers each evening, combining and recombining to play pieces by different composers, gives the programming a sense of vitality and diversity, and contrasts with the more gig-like format of Non Classical. Previous editions had continued past 23:30, so I was rather glad this evening ended at 22:30 and I could catch the Overground from Dalston Kingsland back out West.

Escape from neuro ward

Two and a half years ago, my partner Peer was admitted to Charing Cross Hospital for emergency brain surgery to remove a cyst that was obstructing the fluid flow in his brain. This surgery almost certainly saved his life. Today we returned to the hospital to get the results of his 2-year scans, and the professor of neurosurgery told him that they would no longer need to monitor his progress.

Continue reading “Escape from neuro ward”

They’re eating live animals!

The latest target of our collective, smirking, tabloid ire is the news that restaurants in China are serving up par-cooked fish, still alive, to diners who gleefully pick them to bits with their sadistic chopsticks.

And yet here we are, nation of sanctimonious prudes, tuning in avidly night after night to watch live insects being eaten by their intellectual inferiors in the name of light entertainment.

Double standards? Never!

Uxbridge Road Street Party

There’s some sort of celebration going on the Uxbridge Road, here in Shepherd’s Bush.

Perhaps 150 men, Middle-Eastern or Maghrebi are gathered, incongruously, outside Nando’s, singing, drumming
and waving flags. They’re spilling into the road, where they wave down cars as their friends or compatriots drive past.
Neither the man in al-Abbas supermarket nor the lad in the Co-op had any idea what was going on, so I’m going to do a little research….

Continue reading “Uxbridge Road Street Party”

Duke Bluebeard’s Castle / The Rite of Spring, English National Opera 10xi2009

It’s good to disagree, and Peer and I certainly differed on this double bill.

I came out of the Coliseum impressed by Daniel Kramer’s disturbing interpretation of Bartók’s one-act two-hander, and entertained by Fabulous Beast’s performance of Stravinsky’s epoch-defining ballet; Peer deemed the evening incoherent, and thought the performances unengaging, and indeed somewhat trite. Continue reading “Duke Bluebeard’s Castle / The Rite of Spring, English National Opera 10xi2009”