Design Tip: Color Blocking on Headers

I wanted to share a little design tip with you all today.  It actually came about when someone on a Squarespace group wanted to know how to do the effect (shown below) and, of course, with 10 million other things to be working on instead, I thought...challenge accepted.  

Screen Shot 2016-11-12 at 1.47.07 PM.png

What is color blocking?

It's really just a method of using a block of solid color.  Sorry, it's not complicated.  We'll get to that right now.  Ready for some CSS?


Step 1:  Decide what element you're going to use and style accordingly

For this example, we're going to use the h1 element.  I do want to point out some design tips for using the style before proceeding though:

  • use on a modern, thin, sans-serif font like Oswald or Helvetica Neue
  • change the text to all uppercase
  • don't use on things that may be more than one line (like blog titles), it just doesn't look right...believe me.  Sidebar headers may be a good place to utilize this.

DEMO:

Example

CSS:

h1 {    
    font-size:2.3em;
    text-transform:uppercase;
    letter-spacing:.1em;
}

HTML:

<h1>Example</h1>

Step 2:  Apply Color Block

Now, the fun stuff.  :)  We are going to utilize pseudo elements to achieve our look.  Back in the day, you'd use a tiny image and repeat it, but we are smarter than that.  If you don't know much about pseudo elements, just know that it's a neat CSS trick to use to avoid unnecessary spans and divs.  Anyway!  

DEMO:

Example

CSS:

h1 {
    font-size:2.3em;
    text-transform:uppercase;
    letter-spacing:.1em;
    position:relative;
    display:inline-block;
    z-index:0;
}

h1:before {
    z-index:-1;
    position:absolute;
    width:100%;
    height:50%;
    background:#fbeded;
    content:"";
}

HTML:

<h1>Example</h1>

Step 3:  implement on your website

Well, here's the tricky part.  Thought you could just copy/paste?  Sorry, it's rarely that simple.  Here's the thing, you likely already have styles in place for you headers so you'll have to either delete or override them.  

For Squarespace Users

If you're on Squarespace, you have to override them (unless you're on the developer platform) through the use of "!important".  Also, to center it you have to center the containing div - which is tricky since the outer container is a block (which means it'll center everything in that block.  So, use wisely!

From the dashboard, go to Design -> Custom CSS and add this code into the white text area:

h1 {
    position:relative;
    display:inline-block !important;
    z-index:0;
}
h1:before {
    z-index:-1;
    position:absolute;
    width:100%;
    height:20px;
    background:#fbeded;
    content:"";
}

If you want this centered, you'll need to center the block it's in.  

If you're on Wordpress, just add to your styles file and make adjustments as needed.

Please let me know if you try this out, I'd love to check it out!  :)  Have another design or css quandary?  Leave in the comments below...