Web Design Trend Showcase: Horizontal Bands
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
Thuiven.com
TonyGeer.com
MailChimp.com
CampaignMonitor.com
LifeTreeCreative.com
StyleDivision.net
EthixStudios.com
MediaTemple.net
TasteTrend.com
MacaMontreal.com
ESOrganizers.com
UzairUsman.om
Nitobi.com
Emiralo.com
Everywun.com
AsanteDev.com
RobertMarriott.com
WPUnlimited.com
JunoWebdesign.com
TechnoPhobia.com
RightBanners.com
Ekklesia360.com
Branded07.com
TwiggleGraphics.com
OnWired.com
ClearMediaWebsites.co.uk
SureFireMedia.com
WakeInteractive.com
FlingMedia.com
Deaxon.com
DesignChuchi.com
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.
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.
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?
Stylin’ CSS is pretty good, I think they also have a HTML book as well. Good luck
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.
nice collections :) it helps me in finishing one of my current project.
Very awesome article – I’ll be recommending a lot of people view this.
I think horizontal backgrounds look cheesy on a widescreen.
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.
Sweet collection, I actually really like this trend, & the examples you’ve shown show how done right they can look brilliant.
I always seem to use these horizontal lines. Just be careful not to overdue it. nice post
My only advice would be to used html { blah } rather than body { blah }
It gives you an extra element to play with
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..
Great examples of the trend. I like mini tutorial at the bottom of the post as well.
I noticed how much I’d seen the technique lately only the other day! Great post.
Thanks for mentioning us in your post Chris — very cool.
Tony of OnWired
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! :)
Thanks for a nice inspirational list,.. and tutorial ;)
Some great sites for inspiration, cheers!
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).
Great inspiration source. Perfect post, thanks.
Great post
Too funny. Just last week I used at least six of these sites for inspiration.
Thank you for featuring our website.
Great source of inspiration! Thanks!
You have a great new blog, Chris. Love the grid lines. Keep up the great work!
Great article. Thanks for the mini tut at the end. Delightfully exquisite!
A popular technique, pleasing to the eye to give illusion of depth.
Very smart. Thanks Chris! Would this work the same way doing vertical bands?
Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.
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?
Great collection. Thanks for sharing.
I must say, useful information for users especailly for website designers.
http://www.eluneart.com
I must say, useful information for users especailly for website designers.
Great horizontal bands List and with short tutorial to boot. I think MediaTemple.net is my favorite. Ive always like that design.
Very nice designs if only all sites were this nice to get around.