Nick's illustration had three different layers for the heads. They are just slightly different variations. We could swap out the images with an animation or with JavaScript or something but having an always-running animation (or even one that runs every page load) would probably be mega-annoying for heavy forums users. Instead we'll make it an Easter egg, that is, a little feature that you might not notice unless you happen to randomly stumble across it.

What we'll do is swap out the images when the browser window resizes through @media queries. Instead of just a handful of @media queries that would change the heads a few times, we'll make a crapload of @media queries that change them every few pixels. Essentially channeling the spirit of Arley McBlain's "Lark Queries.".

We use a Sass loop to create the many @media queries we need. Ultimately:

@for $i from 25 through 125 {
  @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) {
    .forum-wrap { background-image: url(../wp-content/themes/CSS-Tricks-10/images/header-forums-2.png);
    }
  }
  @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) {
    .forum-wrap { background-image: url(../wp-content/themes/CSS-Tricks-10/images/header-forums-3.png);
    }
  }
}

What's nice about this is that we don't load those additional images unless the page resizes so we're not loading extra stuff just for an Easter egg.

Comments

  1. Andrew Maier
    Permalink to comment#

    Curious if you can use OR in addition to AND in media queries? That way you could just have two rules (with lots of ORs) rather than lots of rules with ANDs.

    • Chris Coyier
      Permalink to comment#

      That’s a good point! Ultimately I think it’s a horse apiece (it’ll be about the same amount of code, a bit harder to write in a loop, and less repetitive code to be eaten up by gzip).

      You do OR’s with commas in media queries, so like

      @media (max-width: 500px), (min-width: 501px) {
        /* or whatever */
      }
      
  2. Caparico
    Permalink to comment#

    I noticed that if I jiggle around the page’s width for about 10 seconds in a row, I’ll get the old “Aw, Snap! – something went wrong…” message from Chrome, probably having to do with running out of allocated memory, due to so many media queries changing in the background.
    I realize that repetitive resizing is not something a user would normally do, but are there any known less consuming alternatives to this method?

  3. markdesign
    Permalink to comment#

    Why not just use JS with resize event?

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.