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.

Comments

  1. User Avatar
    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. User Avatar
    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?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag