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.

Comments so far

  1. [...] [...]

    by 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine on 18th February 2010 at 1:13 pm

  2. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Web Design Cool on 18th February 2010 at 1:54 pm

  3. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) - Webreweries.com on 18th February 2010 at 3:43 pm

  4. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by Wordpress Blog Services - 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) on 18th February 2010 at 3:56 pm

  5. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by jean philippe gousse » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) on 18th February 2010 at 4:59 pm

  6. you got quite a few postbacks too ;)

    by David G. Paul on 18th February 2010 at 11:41 pm

  7. Yep! Who’d have thunk it :)

    by Christina on 18th February 2010 at 11:43 pm

  8. [...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | theReds1106's Blog on 19th February 2010 at 4:13 am

  9. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by ArticleSave :: Uncategorized :: 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) on 19th February 2010 at 8:06 am

  10. [...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates on 19th February 2010 at 11:37 am

  11. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by Barker Design | Graphic & Web Development » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) on 19th February 2010 at 4:03 pm

  12. [...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « Free Templates and theme on 19th February 2010 at 5:45 pm

  13. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Tutorial51 on 19th February 2010 at 7:20 pm

  14. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « eggtea.com on 19th February 2010 at 11:38 pm

  15. [...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | TipTe.com on 20th February 2010 at 9:05 am

  16. 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. :)

    by Elliot Jay Stocks on 22nd February 2010 at 12:49 pm

  17. 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.

    by Christina on 22nd February 2010 at 1:03 pm

  18. [...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | BestWebMagazine on 22nd February 2010 at 3:49 pm

  19. [...] [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX on 4th March 2010 at 7:15 am

  20. 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.

    by Stacy on 13th March 2010 at 1:20 pm

  21. [...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Top Web Hosts Review Best Web Hosting 2010 on 24th March 2010 at 10:51 pm

  22. 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

    by clo on 30th July 2010 at 11:33 pm

  23. 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 :)

    by Christina on 1st August 2010 at 10:40 pm

  24. 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.

    by clo on 1st August 2010 at 11:50 pm

  25. [...] Horizontal Stripes36 This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) on 3rd December 2010 at 12:14 am

  26. [...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]

    by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « Swadesh's Technology Blog on 18th December 2011 at 5:13 pm

Leave a Comment