We have the basic gallery header in place, but it's missing the little blue people that Erica put in the original illustration. We had talked about it in advance, and decided it would be pretty cool if when the screen was resized, the people would stay put as the gallery wall moved behind them, so it looks kinda like they are browsing the gallery in awe.

Since the people graphics are purely ornemantal, using markup for them isn't ideal. Fortunately there are two of them and we get two free pseudo elements on every element (::before and ::after). We use those to add them.

We introduce a concept in this video that will continue to be useful, the concept of "reverso media queries". We're largely working desktop-down in this design, so our media queries are based mostly on max-width. But if we set up the same media queries based on min-width, we can target the screen only when it's larger than a certain size, not smaller.

In this circumstance, the people graphics just don't fit on small screens. So we use a reverso media query to load them, that way we'll load them on large screens that they work on, but don't load them on small screens. That's better than loading them all the time and hiding them on small screens.

Comments

  1. christopherisaak
    Permalink to comment#

    That was a cool technique to save bandwidth on smaller devices. You might address this in a later screencast, but in your testing, did this work?

    • Chris Coyier
      Permalink to comment#

      I does work in desktop Chrome like I was using here, yep. As evidenced by the flash of white you can see while the image loads after resizing, but also you can check out the Network tab in the web inspector.

      I’m not sure if it’s 100% guaranteed not to load in all browsers, but here’s some relevant research by Tim Kadlec.

  2. Jason Neel
    Permalink to comment#

    Nice technique on using the pseudo elements here, Chris! My original thought when I saw this was, “Why not declare multiple backgrounds on your header?” So I whipped up a CodePen to try that out and ran into some problems, i.e. you can’t really fine tune right positioning with background images (at least not yet) which would hurt your crowd control there on the right. And according to caniuse.com generated content actually has slightly better browser support than multiple backgrounds (looks like IE8 is the only issue there). That was surprising to me. The more you know…

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:

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

We have a pretty good* newsletter.