Way back in 2015 I was wondering round Manchester’s Northern Quarter and happened on a stunningly simple flyer for a Deerhoof gig at the Deaf Institute. Being a bit of magpie for tat and found ephemera I kept the flyer safe with the intention of making it in the browser one day, then of-course lost it. Anyways, after a little bit of research I found more of Hey! Manchester’s flyers on-line and set about re-creating them in the browser.

Essentially I think these would make great HTML / CSS cards or especially cool author profiles in an underground (or even overground) online mag. Once again it’s amazing what you can achieve with a little bit of HTML and CSS.

Here’s Jim Ghedi looking epic in a field..

Whilst there’s nothing complex about these flyers, reproducing them gave me the chance to play with CSS clipping paths and blend modes (again!) and I got great results. As regular readers have probably realised by now I’m a little bit fascinated by and passionate about bringing print design into (or should that be onto?) the web. Whilst I love the technical challenge, I feel it’s also really important to try new things, experiment with visual language from different media and to make use of the fantastic new (and not so new) CSS properties and browser capabilities we have at our disposal these days.

I’ve only attached the code for the Jim Ghedi flyer, simply because the clipping path on the image for this was the most ‘complex’, though with Firefox’s inspector tools as good as they are currently this was really easy to perfect in the browser. The code for all the flyers is in a repo should you want it and for those who want to know what the font is (and who wouldn’t.. ;)) it’s Gothic 725. None of the flyers and type are responsive or fluid, though I might sort that out soon. If anyone fancies a challenge fluid type would be incredibly easy to incorporate using the 1vw reset method I’ve described here.

<div class="container">
    <header>
	    <p>Hey Manchester Presents </p>
	    <p>Heymanchester.com </p>
    </header>	
		
    <img src="../images/jim-ghedi-crop-adj.jpg" alt="Jim Ghedi looking epic in a field">	
		
    <section>
	  <h1>
	    <span class="artist">Jim Ghedi </span> <br/ >
	    <span class="support">Plus DBH </span> 
	  </h1>
	  <h2>The Castle Hotel, Oldham Street < br /&gt 
          7.30pm Thursday 17 May 2018 </h2>
	  <p>Tickets £8 adv from The Bar and Seetickets.com </p>
    </section>
</div>

@font-face {
    font-family: 'Gothic725 Bd BT';
    src: url('../fonts/Gothic725BdBTRegular.woff2') format('woff2'),
    url('../fonts/Gothic725BdBTRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gothic725 Blk BT';
    src: url('../fonts/Gothic725BlkBTRegular.woff2') format('woff2'),
    url('../fonts/Gothic725BlkBTRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

.group:after {
     content: '';
     display: table;
     clear: both;
}

body {
    padding-top: 1rem;
    text-transform: uppercase;
    line-height: 1.2;
}
		
.container {
    width: 568px;
    height: 800px;
    padding: 30px;
    margin: 0 auto;
    background-color: #cad5fe;
}	

header {
    width: 100%;
    height: 30px;
    padding: 6px;
    margin-bottom: 45px;
    font-family: Gothic725 Bd BT;
    font-size: 16px;
    color: #cad5fe;
    background-color: #010300;
}

header p:first-of-type {
    float: left;
}

header p:last-of-type {
    float: right;
}
 
img {
    display: block;
    width: 440px;
    margin: 0 auto 45px; 
    mix-blend-mode: multiply;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

section {
    border: 2px solid #010300;
}

section p {
    padding: 15px 0 1px 12px;
		}

/* ----------------- type -------------- */

h1 .artist {
    font-size: 71px;
    line-height: 0.75;
}
	
h1 .support {
	font-size: 30px;
}
		
h1, h2 {
    padding: 18px 0 0 12px;
    border-bottom: 2px solid #010300;
    font-family: Gothic725 Blk BT;
}

.support, 
h2 {
    font-weight: 400;
}

h2, h3 {
    font-size: 20px;
}

p {
    font-family: Gothic725 Bd BT;
}