The custom header illustration for the videos section has come in, this time from Alyssa Nassner.

We spend a little time organizing the Photoshop file and naming layers and stuff just so we can stay organized and understand what's what. We save a copy of the file so as not to mess with the original.

We ultimately have four parts in this header: the background, the title, and the left and right "Reels." It's similar to the Gallery where we had the groups of people on either side.

We try and get a little clever by re-using the Reel. It's the exact same image only mirror imaged, so we use transformX(-1) to flip it around. That'll save us one image request.

We run into a really weird problem where the left reel refuses to go off the left edge of the page. We probably spend too much time freaking out about why it won't work and ultimately don't get it in this video.

We write media queries to remove the reels on small screens.


  1. Martin Wolf
    Permalink to comment#

    Just a quick tip for the Chrome Web Inspector: When you’re dealing with numbers and holding down the arrow key to count down or up you can hold down shift while you’re doing this and then you’re jumping in 10-steps, like in Photoshop.

  2. Mark

    Re the image cutting off, not sure of a solution but I think the problem is because the image is flipped, so the left edge is now the right edge, thus when you add the negative margin it’s occurring on the right instead of the left if that makes sense?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.