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.
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.
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?