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

    • User Avatar
      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. User Avatar
    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. User Avatar
    markdesign
    Permalink to comment#

    Why not just use JS with resize event?

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-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag