Blue Notes

A labour of love and typography.

Late last year I set myself the challenge of recreating some of the legendary Reid Miles artwork in the browser, partly to test my layout chops and partly to learn and explore new technologies and techniques. All the sleeves featured in the screengrabs below were created using HTML and CSS, all the layouts, type and typography are responsive.

A post with code snippets that details the creation of the sleeves, some of the development challenges and how I incorporated responsive typography can be found here and there's a repo with the code for each individual sleeve here.

As a bit of an update. I’ve been recreating a few of the more complex sleeves using CSS Grid with great results recently and a couple of these can be found on the repo mentioned above. I’ve started adding texture using CSS filters and blend modes, amongst other things, and have begun to write this up here

In the meantime here's a link to the original sleeves and a CSS grid version of Cornbread on CodePen