Following on from yesterday’s work, another experiment today, and this time I chose a real piece of constructivist design to copy:
The simple lines of this image make it fairly straightforward to lay out in HTML and CSS:
http://playground.matthewbutt.com/why.htm
Here’s how I did it:
My h1 contains the text ‘WHY?’. The h1 is a 200px square absolutely positioned on the page.
To create the semi-circle, I’ve given this element two background gradients: the first uses a linear gradient to draw two blocks of colour on the page: the upper block is solid parchment colour, whilst the lower block is transparent.
In Mozilla this is marked up like this:
-moz-linear-gradient(top, #F1ECD9 100px, rgba(241, 236, 217, 0) 100px)
In Webkit is takes this form:
-webkit-gradient(linear, 0 100, 0 200, from(#F1ECD9), color-stop(0, rgba(241, 236, 217, 0)), to(rgba(241, 236, 217, 0)))
You’ll see that I’ve defined the transparent colour as rgba(241, 236, 217, 0) rather than simply transparent; I found that using simple transparent gave me some ghosting, which is clearly not the intention.
Underneath this gradient is a second background, which this time defines a radial gradient:
-moz-radial-gradient(100px 100px, circle cover, black 100px, #F1ECD9 100px, #F1ECD9 200px)
-webkit-gradient(radial, 100 100, 100, 100 100, 200, from(black), color-stop(0, #F1ECD9), to(#F1ECD9))
In each case, this draws a 100px-radius black circle, followed by an area of parchment colour.
The lipsum content with the inverted red semicircle is coded in a similar way, although I could do away with the linear gradient, as my p tags give me the perfect hooks for a parchment-coloured background without worrying about gradients. The text is shifted down with a simple padding-top rule, and the red line down the side is an equally straightforward border-right.
The large red square doesn’t actually exist: it’s an :after pseudo-element on the body tag, which is then sized, positioned and rotated. I had to give it content(' ') to get it to appear, but otherwise it’s pure smoke and mirrors.
Finally, the three 45° links were interesting to position:
They start off as three li elements arranged normally on the screen:
Next, I rotate the containing ul by 90° widdershins around its top right corner:
Finally, I rotate each li by 45° clockwise around what was originally its middle-right and is now its top-centre:
These are then positioned absolutely on the page.
And that’s my piece of constructivist CSS for the day.
I have one outstanding problem: the edges of my semi-circles are unpleasantly aliased. I’ve tried leaving a small gap between the colour stop points in the gradient to see if that helps, but the effect is pretty unsatisfactory. Any suggestions would be welcome!
Acknowledgments
Fonts
- Great Primer, which is one of the Fell Types digitally reproduced by Igino Marini
Sites
- Original image found at Essential Architecture
Matthew Butt 