Line25

Web Design Trend Showcase: Horizontal Bands

Read the full post

The use of horizontal bands in website design has been a growing trend over the last few years with results of a fantastic looking website layout. Not only does the use of these horizontal strips provide specific containers for each page area, but it also spans right the way across the user’s monitor. This is especially handy when taking into consideration those with an exceptionally large monitor, helping prevent the main site content being lost in a sea of flat colour. Check out this collection of excellent examples of this web design style, and follow through to a quick walkthrough of how to create the effect yourself.

AndrewBradshaw.com

Web design trend example

Thuiven.com

Web design trend example

TonyGeer.com

Web design trend example

MailChimp.com

Web design trend example

CampaignMonitor.com

Web design trend example

LifeTreeCreative.com

Web design trend example

StyleDivision.net

Web design trend example

EthixStudios.com

Web design trend example

MediaTemple.net

Web design trend example

TasteTrend.com

Web design trend example

MacaMontreal.com

Web design trend example

ESOrganizers.com

Web design trend example

UzairUsman.om

Web design trend example

Nitobi.com

Web design trend example

Emiralo.com

Web design trend example

Everywun.com

Web design trend example

AsanteDev.com

Web design trend example

RobertMarriott.com

Web design trend example

WPUnlimited.com

Web design trend example

JunoWebdesign.com

Web design trend example

TechnoPhobia.com

Web design trend example

RightBanners.com

Web design trend example

Ekklesia360.com

Web design trend example

Branded07.com

Web design trend example

TwiggleGraphics.com

Web design trend example

OnWired.com

Web design trend example

ClearMediaWebsites.co.uk

Web design trend example

SureFireMedia.com

Web design trend example

WakeInteractive.com

Web design trend example

FlingMedia.com

Web design trend example

Deaxon.com

Web design trend example

DesignChuchi.com

Web design trend example

Create Your Own Horizontal Bands

Let’s take a look at how to create and implement such design styles into your own website designs. We’ll be producing the initial graphics in Adobe Photoshop, exporting the relevant imagery then adding some simple CSS coding to bring the effect to life. This technique can be used not only on the page body, but also on container divs and other elements.

Create a new document in Adobe Photoshop, I tend to work at a resolution of 1680×1050 to give a good indication of the overall appearance of the website on an average sized widescreen monitor.
Create a selection across the width of the document, fill with white on a new layer and double click to access the layer styling properties. Click the Gradient Overlay tab and select two swatches to create a vertical linear gradient.

Repeat the process on a new layer, this time creating a larger blue gradient. To add an extra element of detail leave a 1px gap between the panels to provide the illustion of a highlight, also add a subtle Inner Shadow to the panel to give an impression of depth to the layout.

With the visual concept complete, draw a thin one to two pixel selection vertically across each band of colour. Go to Edit > Copy Merged and paste the thin strip into a new document

Go to File > Save for Web to export the strip, choose a suitable filetype and compression. Notice the considerably small file size of the graphic, making it an excellent technique which not only visually enhances the page, but keeps overall weight to a minimum.

Add the CSS coding to style the web page. Here the image is being applied to the body tag and set to repeat horizontally using the repeat-x command. The CSS can also be condensed down to a single line by writing out the rule in shorthand.

With numerous instances of the image butted together it gives the impression of a continuous graphic when viewed in the browser. In this particular technique we have used a single graphic to provide two panels of a specific height, to take the example further each coloured strip could be attached to an individual div along with a background colour sampled from the image, this will allow the section to continuously expand depending on the length of the content.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

50 Comments

  1. Where was this post two months ago when I was looking for these? lol Thanks for the great collection.

    One note, I’d recommend making your repeating background at least 10px wide, to give your browser a *itty-bitty* break.

  2. great round up, it’s just putting the damn website content on it that I have a problem with! Know any good xhtml & css books?

    • Kevin Wirth says:

      Stylin’ CSS is pretty good, I think they also have a HTML book as well. Good luck

    • whiskey says:

      Have you seen concrete5? And if you don’t have access to php and mysql on your server, how about LightNeasy?

      Both are opensource and free CMS (Content Management Systems) for which creating a template is as simple as using the html and then putting there (instead of the content) a tag.

      The cms reads the tag and will put there the content you want.

      BTW, by far, the best way to learn xhtml and css is by watching websites’ source code. You might want to use some firefox extensions (like Web Developer Toolbar) that let you edit the websites live and test stuff out.

  3. abdusfauzi says:

    nice collections :) it helps me in finishing one of my current project.

  4. Lawrence says:

    Very awesome article – I’ll be recommending a lot of people view this.

  5. Kevin Wirth says:

    I think horizontal backgrounds look cheesy on a widescreen.

  6. The horizontal band is a great design tool, but using too many of them can create a shelf appearance. They’re great for highlighting certain areas of content though.

  7. liam says:

    Sweet collection, I actually really like this trend, & the examples you’ve shown show how done right they can look brilliant.

  8. Art Webb says:

    I always seem to use these horizontal lines. Just be careful not to overdue it. nice post

  9. Tim Wright says:

    My only advice would be to used html { blah } rather than body { blah }

    It gives you an extra element to play with

  10. Luis Eduardo says:

    I really like this kind of sites with horizontal bands, and it could be really helpfull as a tool, with a good and simple efect on the header you can have something extra..

  11. BeyondRandom says:

    Great examples of the trend. I like mini tutorial at the bottom of the post as well.

  12. Jugalug says:

    I noticed how much I’d seen the technique lately only the other day! Great post.

  13. Tony Chester says:

    Thanks for mentioning us in your post Chris — very cool.

    Tony of OnWired

  14. JohnONolan says:

    Great post Chris! You should do a roundup of all the faux-3D stuff that’s floating around lately too, seems to be more and more of it every month! :)

  15. Creamy CSS says:

    Thanks for a nice inspirational list,.. and tutorial ;)

  16. MorayWeb says:

    Some great sites for inspiration, cheers!

  17. Florent V. says:

    One remark on the How-To: i’d advise people to cut a 10px-wide slice, not a 1-2px-wide one. The image surface will be 5 or 10 times greater, but with little to no impact on the file size if done right.

    Why a larger image? Because it makes maintenance easier, since when browsing the images for your website design it’s hard to figure out what this or that 1px-wide image is for.

    Plus some older computers and older browsers have difficulties repeating one image thousands or tens of thousands of times (small performance hit).

  18. T-Law says:

    Great inspiration source. Perfect post, thanks.

  19. Ryan says:

    Too funny. Just last week I used at least six of these sites for inspiration.

  20. Tamuir says:

    Thank you for featuring our website.

  21. Jan says:

    Great source of inspiration! Thanks!

    You have a great new blog, Chris. Love the grid lines. Keep up the great work!

  22. Dhane Diesil says:

    Great article. Thanks for the mini tut at the end. Delightfully exquisite!

  23. A popular technique, pleasing to the eye to give illusion of depth.

  24. Very smart. Thanks Chris! Would this work the same way doing vertical bands?

  25. Amber says:

    Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.

  26. Valeriano says:

    Dang you’re inspiring me a lot! I wonder how to achieve the spotlight on center effect for those bands. Might be just a couple of slices, one monotone for the oversized background and one (that gradually lit up and degrades) for the main content part?

  27. julien says:

    Great collection. Thanks for sharing.

  28. Ben Hurt says:

    I must say, useful information for users especailly for website designers.

    http://www.eluneart.com

  29. 北大青鸟 says:

    I must say, useful information for users especailly for website designers.

  30. CSS Gallery says:

    Great horizontal bands List and with short tutorial to boot. I think MediaTemple.net is my favorite. Ive always like that design.

  31. Very nice designs if only all sites were this nice to get around.

  32. thanks a lot for posting this, this is very useful for me, thanks again

Sorry, comments are now closed