Today’s study is the cover of Generation X’s 1977 single, Your Generation:
Here is my version:
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
spaninside (‘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.
- Walsh, Gavin (2006). Punk on 45: revolutions on vinyl 1976–79. London, Plexus. ISBN-13 978-0-85965-370-1