Harper, 1966 HTML Poster

Harper, 1966 HTML Poster

My time with making GIFs, in particular animated movie posters, has been on suspension now for about three years. Sad in some ways, but I’ve been busy. The effort has been replaced primarily with learning to code with HTML/CSS/JS and more importantly learning to teach how to code. I hope I’ve come a long way in the teaching department – making tutorials that are not ungodly long and riddled with my stammering, figuring out how to encourage unstructured practice, and keeping up with the technical times – it’s all been quite a challenge. And teaching fully online now, oh boy, I’m glad for the Commons and Discord. Those are both topics for another time.

On the project side, with new skills come aspirations to work on new projects. But my time has mostly been absorbed by the teaching so little efforts have been sprinkled in here and there. For example, building a clone of The Moron Test and the mostly-unfun-to-play build of the Kevin Bacon Six Degrees of Separation game using the movie database API have taught me a lot and been useful for teaching students. But the retro VHS generator and the movie dialogue database projects which I hope to work on more at some point, haven’t advanced too far.

In the meantime, I’m reaching back to my recent past with the animated posters, but with a new approach. I’m going to try and build a classic movie poster a week using HTML/CSS. The first is Harper, a poster for the 1966 Paul Newman film. I came across it through my Flickr feed of all things. James Vaughan has great vintage pieces of design in his feed and delivered this lovely thing.

I’m a big fan of the early photo cut-out design aesthetic found in this poster as well as the color palette which is very of the 60s. Also, the dotted outlines felt very ready to be made with CSS.

With each build, I’m planning to pick an interesting bit of HTML structure and CSS tricks that make it work. This project uses a trick with padding-bottom property and a percentage value to control the height of each box. As well the image in each box uses the object-fit property to control its fitting. Below is the relevant HTML and CSS

<div class="poster_box poster_box--yellow">
    <div class="poster_imagebox poster_imagebox--yellow">
        <img class="poster_image poster_image--yellow" src="img/newman-face.png" alt="Paul Newman's pretty face">
    </div>
</div>

.poster_box {
  position: relative;
  width: 100%;
}

.poster_imagebox {
  height: 0;
  position: relative;
  overflow: hidden;
}

.poster_imagebox--yellow {
  padding-bottom: 105%;
}

.poster_image {
  display: block;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

.poster_image--yellow {
  height: 80%;
  bottom: 0;
}

The div.poster_box width takes up 100% of the space its given, but you might wonder where does the box’s height come from? The image does not give the box height or width as it is resized using the object-fit property – the image now acting like a background image. Also the div.image_box has a height set to 0.

But the image_box has a padding-bottom set to 105%. And padding percentages are calculated using the width of the parent element, not itself. So whatever the width of the parent poster_box is, the height of image_box is 105% of that. For example below, an image_box width of 418.44px * 1.05 creates a height of 439.36px. And that width comes from the parent poster_box (note the visual includes a margin which is not part of the calculation).

The height of the other poster boxes are controlled in a similar fashion using percentage values. And the advantage of this method makes both the height and width of the boxes responsive. The entire composition has a max-width of 900px, but can be shrunk down. It definitely will degrade on the phone, but it works well enough!

For this first project, I’m avoiding animation of elements using CSS but it will figure prominently in the next one I hope.