I’m at WordCamp London today speaking about how I used Advanced Custom Fields to bring a little bit of Photoshop-esque control to the dashboard, something that allows the user to put together print style graphics in the browser.
Full of control users can layer background and inline images and apply CSS properties such as blend-modes, rotate and opacity via the dashboard. Given my last post was about re-creating some classic Blue Note album sleeves, I figured I’d continue to keep it funky and work with an image of Bernard Purdie and a font from the legendary Swifty.
This image features two background texture layers with blend modes and custom colour attached to them. The drummer is comprised of two images, both of which have blend modes of screen applied. The bottom border is another custom element with a blend mode of multiply. All elements have been set in the dashboard using Advanced Custom Fields.
This image has two background texture layers with blend modes and custom colour applied. The drummer is comprised of two images, one of which, a halftone bitmap, has a blend mode of screen applied the other is a simple black and white image. The sine wave graphic beneath the drummer has rotate, blend mode and opacity applied. All set in the dashboard.
This image has two background texture layers and blends modes have been applied, colours have been changed and the drummer is comprised of three images; colour, black and white and halftone bitmap. All these have blend modes and opacity applied. Once again all this is controlled via the dashboard.
You can install this as a micro theme and import the ACF field data or just take bits of code you want to use, whatever you choose to do I hope you have fun and find this useful!
Here’s a short video below to demonstrate how easy it is control and change content in the dashboard;
Some links I referred to during my talk:
Jen Simmons talk for An Event Apart challenging us to get out of design and layout ruts was a great inspiration to try something different with layout and CSS properties. Florens Vershelde’s excellent post on responsive / fluid typography helped me get my head round the maths of CSS locks plus I wrote about how I incorporated responsive type into my Blues Notes project here.
We’re re-branding here at Tomango swapping our old custom typeface for Neue Haas Grotesk. Inevitably this had me Googling and drooling over layouts that featured this.
The layout below was inspired by this leaflet and utilises CSS blends, fonts and the transform rotate property amongst other things to create the layout. I set myself an hour to make this and came in well under time which just goes to show how easy it is to use some basic css to create great web typography.
The code for the graphic is below, though as a caveat this only works fully in Chrome at the moment. I’m quite proud of the blended tat on the container pseudo element I used to create a bit of texture, from memory this came from a session creating textures and tat on a knackered photocopier in a run-down gas station in Huddersfield nearly fifteen years ago.
<span class="grotesk">Haas Grotesk</span>
<p class="copy-right">wohl durchdacht, ausgewogen, diskret und temperiet, sachlich, weich un flussig, mit ihren ausgefilten, harmonisch und logisch aufgebauten Formen ist die Schrift fur den taglichen Bedarf der fortschrittlichen</p>
<p class="vert-one">Haas'sche SchiftgieBerei AG Munchenstein</p>