Horizontal stripes

In this tutorial I will show you how to create never ending horizontal stripes in your web design using CSS.

View the demo | Download the demo

I first got the idea for horizontal stripes from Elliot Jay Stocks‘ book, Sexy Web Design, where he produces a web design that has horizontal stripes running off the browser page. I then implemented it myself in the design of oldschoolnodoubt.com.

More recently, Neutron Creations launched a new design, again by Elliot Jay Stocks with CSS implemented by Ben Bodien which features the effect both horizontally and vertically.

Right stripes

Here’s the html for a stripe that starts in the middle and heads off to the right side of the screen, let’s keep it simple:

<div id="container">
<p class="horizontal right">Horizontal stripe</p>
</div>

Here’s the css:

.horizontal {
width:100%;
position:absolute;
margin:20px 0;
padding:20px;
}

.right {
left:50%;
margin-left:-100px;
text-align:left;
}

Ok, let’s break down the css. Firstly width:100%; this will make sure that your stripe is always the width of the user’s browser so, no matter how humongous their screen is your stripes will always go off their page.

In order to make sure we can start the stripe from wherever we like we use position:absolute; and use margin:20px 0; to place it vertically. Finally, we use padding:20px; because, well, everything needs a bit of padding.

Now we position the stripe horizontally. For a stripe that heads off to the right we set left:50%; which will give you a stripe that starts in the exact center of the page and continues on forever.

But, I want my stripe to start off center, in fact 100px towards the left of where it is now so I set margin-left:-100px;. If I want it to be off center and 100px towards the right I will use margin-left:100px;.

I then align my text with text-align:left; because I want the text to be next to the end of the stripe.

At this point you probably have a long stripe that heads off in the direction you want but you also have a horizontal scrollbar and that’s rarely a good thing. So now we need to do some work on the container div to get rid of that scroll bar.

Here is the css to go with that:

#container {
width:100%;
overflow:hidden;
position:relative;
height:200px;
}

We want the stripes to head off the browser page so the containing div must be the full width of the browser with width:100%; and in order to get rid of the scroll bar we use overflow:hidden; hiding the excess of the stripe.

You will now have a blank screen beacuse the stripes have a position:absolute; and as there is no content in the containing div we need to set a height:200px; and position:relative; to make sure that the stripes are visible.

Left stripes

To acheive a stripe that starts on the left and stops in the middle I add replace the right class with a class of left on the p:

<div id="container">
<p class="horizontal left">Horizontal stripe</p>
</div>

I then reverse all the right stripe styling:

.left {
right:50%;
margin-right:-100px;
text-align:right;
}

Please note: If you are using an inline element (span, strong, em, a), instead of the p to create your stripes you will also need a display:block; in your css.

19 FEB 10 – EDIT: Added a demo suitable for download.

22 FEB 10 – EDIT: Credited Ben Bodien for the CSS implementation of Neutron Creations.

28 Comments

  1. Elliot Jay Stocks says:

    Thanks for using the idea and for the exposure!

    I should give credit to Ben Bodien (one half of Neutron Creations), though, because although I came up with the design, it was Ben who handled the CSS for that particular trick. :)

  2. Christina says:

    Thanks Elliot for your comment! I will credit Ben Bodien in the post now.

    Ben used a slightly different technique. He set the width of the stripes with px to a large number, which still works but I wanted to make sure that there was absolutely no screen size that would show the end of the line, so I used width:100%;. Ben also positioned things slightly differently.

  3. Stacy says:

    Thanks for this great tip–just what I was looking for based on a specific request from a client. Saved me having to play around with settings for an hour to get the desired effect.

  4. clo says:

    How would I go about hiding the text on a stripe that starts on the left? I tried the text-indent property but no dice. Thanx

  5. Christina says:

    Hi Clo!

    There’s no need to hide the text. Just don’t include it in the markup so you’ll have an empty div tag. You’ll probably need to set a height on the div in the CSS – for example, height:20px.

    The other option is to add span tags around the text and then add a line in your css:
    .left span {display:none;}
    This will hide your text but again you will need a height.
    Christina :)

  6. clo says:

    Thank you for replying and for your help Christina. I’m using a h1 tag instead of a p tag since the horizontal stripe also happens to be the heading required in a element on the html5 page I’m designing. This gives me the opportunity for to include some keywords in the heading, so the text is necessary. The span option you gave me is just what I was looking for. Thanks again.

  7. Rohan says:

    Hey thanks for this wonderful tutorial. Just wanted to know if it is possible for the stripes to have a image as a background. If yes, could you please write down the coding.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>