Creating a reliable stripe pattern

July 2016

Avoiding clipping with repeating stripe effects

Recently, I was asked to solve the issue of a striped pattern being cut off at the edges. This is a common problem with repeating background images, and something we wanted to avoid for this specific client.

The image in question was similar to this:

Repeating stripe pattern - cut off at the edge

It works well enough, but not ending on a whole stripe makes the entire effect look a little unfinished.

The solution

To solve this problem, I decided to use text.

Now, bear with me, as I’m sure you’re reeling at the thought of using slash characters to create this. The actual character I’ll be using is actually the unicode point e900. This would produce an unreadable character on a normal web browser, or likely a square.

Enter webfonts

A fantastic online app called icomoon is available to developers who want to create fonts out of individual gylphs, using vector format images such as SVGs.

First up, was to create the image itself. I recreated a single line in sketch using a stroke. The icomoon app doesn’t like using strokes for creating fonts, so a real polygon was required. As a result, the SVG was then converted to outlines using Layer > Convert to outlines.

A little line in Sketch

Once that was done, the exported SVG file was then imported into icomoon and saved as a font.

Implementing

The font package you get from icomoon contains everything you need to get the font working on the site, including a CSS example. I ended up pairing this back a bit and sticking only with the .WOFF file, as most modern browsers now support that. If you need more browser support, consider keeping the CSS snippet as is.

My resulting CSS looked like the following:

@font-face {
    font-family: 'Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../../fonts/icomoon.woff) format('woff');
}

This was then added to the rest of the css for my site, and the .woff file was uploaded with it.

Adding the font to a page

After adding the font, it was time to get to work on the styling. Here’s the HTML for a basic container with the stripe effect:

<span class="stripe"></span>

That’s all there is to it. The bulk of the work will be done by the CSS for this element, which is as such:

.stripe:after {
    content: "\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900";
    display: block;
    overflow: hidden;
    width: 150px;
    height: 16px;
    font: 16px 'Icons';
}

Yeah, I realise there’s a lot of \e900 in that CSS. It’s not a huge amount of data when it comes to it, and I’m sure that the 1600x700px hero image on the average site takes up more. Either way, the effect you get is worth it. Hopefully, if all has gone well, you should have something that looks like this:

Hmm...

Ah. That could have gone a little better. Not to worry, though! We have one more CSS property up our sleeve: word-wrap. Setting this to break-word will ensure our slew of characters don’t just keep on trucking past the container and forces a line break after the last line. The CSS should now look like this:

.stripe:after {
    content: "\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900\e900";
    display: block;
    overflow: hidden;
    width: 150px;
    height: 16px;
    word-wrap: break-word;
    font: 16px 'Icons';
}

Which produces this:

All better!

And, since this is text, you can style the characters as such:

Green with shadows

Regardless of how you style it, the effect of never having to see a cut-off stripe line will make the whole design look a lot more polished.

Compatibility

The compatibility of major components of this technique is detailed below. Stats from caniuse.com.

property support
:before IE8+, FX, Chrome, Safari, Mobiles
word-wrap Most browsers
WOFF IE11+, FX, Chrome, Safari, Mobiles (except Opera Mini)