We add some extra layers beneath the main header/branding box to give the "stack of papers" look. No big metaphor or anything, it just adds some visual interest and gives us something to work with as we move to other areas.

I go off a bit of a tangent on how things don't really need to look "real" on the web as long as they look good and are obvious. Usually, it's probably better that they don't, as long as it's not awkward or wrong looking.


  1. ed@ed.gs
    Permalink to comment#

    Cmd + Shift + H will toggle the target path of shapes.

    • Chris Coyier
      Permalink to comment#

      Yep totally! But there is a bug (at the time this video was shot) that would bring back the vector shape edges whenever you did anything (like open Layer Styles). It’s since been fixed but it was mighty annoying.

  2. Ricardo Diaz
    Permalink to comment#

    Chris when I first saw the new site, I have to say I was taken back a bit by all the boxes. Its slowly growing on me and reminds me a bit of Windows Metro UI look. Can I ask what inspired you to use this look for the site. In the videos you talk a bit about it but I was wondering what made you go down this route vs what you had before. Feels like you took a 180 approach to the new site.

  3. espellcaste
    Permalink to comment#

    Totally curious about how you’re gonna create the stack of paper… Going great so far!=)

  4. Jarolin Vargas
    Permalink to comment#

    @Chris Coyier Did you record the audio later, or as you were recording the video?

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:

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

We have a pretty good* newsletter.