Impossible pattern makes me dumb

This is the story of how I tried to make a pattern using css background and I failed.

If you are looking for a nice CSS story with a happy ending stop reading now.

On the other hand, if you are like Douglas, and you also think that writing about my sad wasted of hours during the weekend is a perfect blog post, then stay and read on.

First things first: Lets face it, you have a problem. I understand that Douglas wants to read about unsuccessful CSS experiment, after all he is crazy enough to get married in a Castle in São Paulo. But you, my dear reader, should consider stop reading now or a psychology session.

Now that we’ve got the important out of the way, I’ll start with a story.

The Story

I am part of the Red Hat UXD team. Internally the team has a site where we publish our weekly status reports, blog about work in progress, ask questions, and look for shared UXD assets, and we call it UXDepot.

The guys that build the UXDepot did an amazing job. It has some nifty features that make me smile every week, you wouldn’t believe the pleasure I feel every time I click the “Insert Last Status Report” button.

The UXDepot has an image on the header following the Red Hat brand guidelines.

So I set myself to rebuild that image as proper HTML/CSS header.

The Process

At first it seems simple. I’ve created a header with multiple background for the image, the red stipe and the shadow on the right. I’ve multiplied the red stripe and the shadow with CSS background blend modes, added the logo as an svg image and more of less set the font sizes.

That was easy enough, but then I found two roadblocks: the typeface and the pattern.

The Problem

The font Interstate is not open source, I could have replaced it with an image but it is better to use a webfont. So I decided to change it with Overpass.

The second issue is the pattern. After trying for a few hours I found out that I couldn’t reproduce the pattern with CSS backgrounds.

It’s either impossible or I don’t know how to do it.

If it is impossible, then I am dumb for not having realize it before I started. On the other hand if it is possible then I am too dumb to do it. Either I am dumb.

So I chose to use an svg pattern and clip it with a CSS polygon shape.

But I couldn’t match the exact location of the pattern because the positioning of the red background is relative to the center of the box and not the top.

The Result

This is it.

<header>
  <h1>UXDepot</h1>
  <h2>User Experience Design Team</h2>
  <p><a href="https://twitter.com/RedHatUXD"><i class="fa fa-twitter"></i> @RedHatUXD</a><p>
  <h6><a href="http://www.redhat.com/">Red Hat</a><h6>
</header>

The Conclusion

If anyone can solve this, Robb can. I asked him and he told me that since I am already using an image, he’d be inclined to make both background part of the same image.

But he is a fun killer, there is no awesomeness on using background images.

During this weekend I learn that I am dumb.