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.
[...] [...]
Posted by 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine | February 18, 2010 @ 1:13 pm
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Web Design Cool | February 18, 2010 @ 1:54 pm
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) - Webreweries.com | February 18, 2010 @ 3:43 pm
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by Wordpress Blog Services - 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | February 18, 2010 @ 3:56 pm
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by jean philippe gousse » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | February 18, 2010 @ 4:59 pm
you got quite a few postbacks too
Posted by David G. Paul | February 18, 2010 @ 11:41 pm
Yep! Who’d have thunk it
Posted by Christina | February 18, 2010 @ 11:43 pm
[...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | theReds1106's Blog | February 19, 2010 @ 4:13 am
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by ArticleSave :: Uncategorized :: 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | February 19, 2010 @ 8:06 am
[...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates | February 19, 2010 @ 11:37 am
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by Barker Design | Graphic & Web Development » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | February 19, 2010 @ 4:03 pm
[...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « Free Templates and theme | February 19, 2010 @ 5:45 pm
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Tutorial51 | February 19, 2010 @ 7:20 pm
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « eggtea.com | February 19, 2010 @ 11:38 pm
[...] Horizontal StripesThis tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | TipTe.com | February 20, 2010 @ 9:05 am
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.
Posted by Elliot Jay Stocks | February 22, 2010 @ 12:49 pm
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.
Posted by Christina | February 22, 2010 @ 1:03 pm
[...] Horizontal Stripes This tutorial shows you how to create never ending horizontal stripes in your web design using CSS. [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | BestWebMagazine | February 22, 2010 @ 3:49 pm
[...] [...]
Posted by 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX | March 4, 2010 @ 7:15 am