Category Archives: CSS Blends

WordCamp London

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.

image of photoshop style graphic created for WordCamp London with advanced custom fields

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.

image of photoshop style graphic created for WordCamp London with 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.

image of photoshop style graphic created for WordCamp London with advanced custom fields

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.

Repo:

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!

https://github.com/stevehoneyman/wordcamp

Demo:

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.

Slides:

You can download my slides as .pdf or .pptx  files or view them on Speakerdeck

 

Type Jam: Neue Haas, CSS blends and the rotate property.

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.

HTML

<div id="container">

  <h1>
    <span class="neue">Neue</span>
    <span class="grotesk">Haas Grotesk</span>
  <h1>

  <h2>
    <span class="blue">G</span>
    <span class="red">G</span>
  </h2>

  <p class="copy-left">mager<p>
  <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>
  <p class="vert-two">halbfertt</p>

</div>

CSS


@font-face {
    font-family: 'NeueHaasGrotesk-std';
    src: url('NHaasGroteskTXStd-55Rg.woff2') format('woff2'),
    url('fonts/NHaasGroteskTXStd-55Rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasGrotesk-bold';
    src: url('NHaasGroteskTXStd-75Bd.woff2') format('woff2'),
    url('fonts/NHaasGroteskTXStd-75Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    margin-top: 16px;
    color: rgba(0, 0, 0, 0.75);
}

#container {
    position: relative;
    width: 495px;
    height: 710px;
    margin: 0 auto;
    overflow: hidden; 
    background-color: #d7caba;
    background-image: url(nh-bg.jpg); 
    background-blend-mode: unset; 
}

#container:after {
    content: '';
    position: absolute;
    top: 0;
    width: 495px;
    height: 710px;
    z-index: 50;
    background-image: url(haas-tat.jpg); 
    mix-blend-mode: color-burn;
}

h1 {
    font-family: NeueHaasGrotesk-bold;
    font-weight: 200;	
}

.neue {
    position: absolute;
    z-index: 30;
    top: 318px;
    left: 114px;
}

.grotesk {
    position: absolute;
    z-index: 30;
    top: 318px;
    left: 276px;
    letter-spacing: 0.5px;
}

h2 {
    position: relative;
    margin-left: -395px;
    font-family: NeueHaasGrotesk-std;
    font-size: 910px; 
    line-height: .8;
    letter-spacing: -475px;
}

.blue {
    position: relative;
    color: #02a2cd;
    z-index: 20;
    opacity: 0.8;
    mix-blend-mode: normal;
}

.red {
    position: relative;
    color: #f33500;
    z-index: 10; 
    mix-blend-mode: normal;
    opacity: 0.8;
}

.copy-left,
.copy-right,
.vert-one,
.vert-two {
    position: absolute;
    z-index: 40;
    font-family: NeueHaasGrotesk-std;
}

.copy-left {
    top: 428px;
    left: 195px;
    font-size: 16px;
}

.copy-right {
    top: 430px;
    left: 276px;
    font-size: 12px;
    line-height: 1.45;
}
	
.vert-one {
    top: 120px;
    left: -50px;
    font-size: 12px;
    transform: rotate(270deg);
    color: rgba(0, 0, 0, 0.75);
}

.vert-two {
    top: 640px;
    left: 35px;
    font-size: 18px;
    transform: rotate(270deg);
    color: rgba(0, 0, 0, 0.75);
}