Are you tired of your typical columned and boxed layout? It is time to learn how to break out of the box and do something creative. In this post, I’ve collected some of the best examples that are designed out of the box. I’ve also provided some quick CSS tips with demo files on how to break out of the box by creatively using background images and the CSS position property.

Example 1: Huge Inc

What really captured my attention on the Huge site is the header design. Notice how the design elements are extended out of the box.

screenshot

Additional Screencaps: 2 , 3

Example 2: Jason Santa Maria

With the amount of effort and details that Jason input on his site, no doubt it is one of the best designer sites around. Click through the posts, you will find that almost each post is unique and has a different stylesheet. Some visual images are within the grid, some are out of the box.

screenshot

Additional Screencaps: 2 , 3

Example 3: A Brief Message

Similar to Jason Santa Maria’s website, each post on ABriefMessage.com features a different image and CSS stylesheet. Unlike the other typical blog sites, the text on the site is perfectly layouted, so it runs around the image (it is like reading a print design).

screenshot

Additional Screencaps: 2 , 3

Example 4: Trent Walton

TrentWalton.com puts the focus on the header, where each post displays a different background image and typesetting.

screenshot

Additional Screencaps: 2 , 3

Example 5: Wonderbra Ultimate Strapless

Although there are some accessibility issues with the Wonderbra site (eg. the font is not scalable), but it is a lovely design. The content and images are nicely put together. At the first glance, I thought it was a Flash site. Then, I checked the source code and found it is done by CSS and a Javascript text replacement, cufon.

screenshot

Additional Screencaps: 2 , 3

Example 6: Fox

Fox – Fringe web site broke the boring boxed layout by using spectacular background images that blend from top to bottom. Also, the slant cuts in between the boxes make it look more interesting. Don’t forget to check the other Fox TV show sites.

screenshot

Additional Screencaps: 2 , 3

Example 7: Mezzoblue

Mezzoblue made the image extend off the grid. This can be easily achieved by using the margin-left property with negative value.

screenshot

Quick CSS Tutorials

Using CSS Absolute Position (view demo)

The following tutorial imitate the result as seen on the Huge website using the position property. Use position:absolute to place each element. Then set higher z-index for the logo, nav, and content area (so they are placed above the image box).

margin-left

Using background image (view demo)

In this example, the logo and the text are embed in the background image. To make the logo text clickable, first specify the H1 to absolute position, then use text-indent to hide the text in the H1 a.

For the Click Here button, use absolute position to place it in exact location. Specify a background image to it and use text-indent to hide the text. On the hover, change the background position to bottom.

background image

Using margin-left (view demo)

This one is extremely simple. Just specify the image with negative margin-left and float:left.

margin-left

148 Comments

zayıflama
Sep 10, 2009 at 4:02 am

Great works.
Thanks

WebDevVote.com
Sep 10, 2009 at 4:10 am

You are voted!
Track back from WebDevVote.com

Xiawa
Sep 10, 2009 at 4:14 am

I love example 3 :D

company logo design
Sep 10, 2009 at 5:48 am

Nice and informative about header design

complex41
Aug 23, 2011 at 2:53 pm

And then he handed you the thirty-five 45

div
Sep 10, 2009 at 5:51 am

Awesome………..Kewl……………

MJ
Sep 10, 2009 at 6:33 am

Yay you are my favorite tutor! I’ve been looking for such a thing last week

Oliver
Sep 10, 2009 at 7:00 am

Some nice looking sites and good tips which I could use for my next web site. I tend to stick to one type of layout but I will use these examples to try other layouts. Thanks for sharing.

Noel Wiggins
Sep 10, 2009 at 7:05 am

Main these are some refreshing designs!

Seems like the internet was becoming one huge example of “invasion of the body snatchers”

Very Inspiring Blog Post Now lets reface this place!

Thanks & Regards
Noel from nopun.com
a professional graphic design studio

Ronja
Sep 10, 2009 at 7:51 am

The web design’s inspire me! :D

imrose @ discount web design
Sep 10, 2009 at 8:08 am

these are really coooooooooooooooool.

DokorThomas
Sep 10, 2009 at 8:15 am

Very nice. CSS is wonderful altho’ bit challenging at times. I love to see how others have worked styles I have only dreamed about. Bookmarked your blog for regular reading… three thumbs up!

ben
Sep 10, 2009 at 8:20 am

Loving the examples here some truly inspirational stuff thanks for this!, still getting to grips with CSS trying to teach myself really. Consider this site bookmarked retweeted and various other socially acceptable thingies

Chris Howard
Sep 10, 2009 at 8:44 am

Love these, loving seeing folks push the boundaries. Very inspirational.

And if I may add my own contribution, albeit not in the same league as any of those, Idyl Book Cafe

If anyone wants to know how I did any of its tricks, feel free to ask. Hopefully I’ll remember!

Rob
Sep 10, 2009 at 8:46 am

Nice sites. Thinking (designing) outside the box.

Cyprian Gwóźdź
Sep 10, 2009 at 9:03 am

Thanks, Trent Walton is smth new.

Web Developer Ottawa
Sep 10, 2009 at 9:06 am

Thought the “Huge Inc” project was a perfect example of out of the box.

Jack
Sep 10, 2009 at 10:56 am

Cool and nice, Nick you truly provided useful infomation. Thanks.

John Lascurettes
Sep 10, 2009 at 11:00 am

What’s a “z-inex” (in the first tutorial illustration)? ;p

mg12
Sep 10, 2009 at 11:21 am

Thanks for your great work.
This article was translated to Chinese and reposted on the following page (keep the link of original article):
http://www.neoease.com/css-design-out-of-the-box/

Calvin Tennant
Sep 10, 2009 at 11:49 am

I like this a lot. The idea doing a web design in the fashion of a magazine has crossed my mind multiple times.

Jerome
Sep 10, 2009 at 11:49 am

As usual a very interesting post. Thanks for sharing this!

Nick La
Sep 10, 2009 at 11:51 am

@John Lascurettes – z-index is like layers (greater value is always in front).

Amber Weinberg
Sep 10, 2009 at 11:57 am

These are great! Will definitely take some of this inspiration to my own work.

beyondesign
Sep 10, 2009 at 6:43 pm

Great stuff and thank you for the inspiration! Only (small) caveat: You may end up needing a fix for IE6’s poor rendering of floated elements with negative margin. Here’s one that has worked for me in the past: <!–[if lt IE 7]> <style type=”text/css”>#your_selector {zoom:1; position:absolute;}</style> <![endif]–>

Linda
Sep 10, 2009 at 8:14 pm

Cool and nice

ajiz
Sep 10, 2009 at 9:19 pm

Nice.I want learn more………….

acinam
Sep 11, 2009 at 4:00 am

thanks :D

AtiKuSDesign
Sep 11, 2009 at 6:15 am

This is a massive ‘gimmick’ that I see being used a lot at the moment. i think this design technique will have to be included in any 2009 design trend lists

Adam Akers
Sep 11, 2009 at 9:05 am

Another great post

MrAmor
Sep 11, 2009 at 9:12 am

it’s hard facing the browser compatibility ! …but it’s possible if you drink a lot of coffee ;-)

Elizabeth K. Barone
Sep 11, 2009 at 10:45 am

It’s so hard to break out of the box. I think some of the examples even tread on the line of being grid designs. I think I might play with this a little over the weekend if I get a chance! (:

Jim
Apr 26, 2012 at 5:37 pm

Thank you Elizabeth!

Marc
Sep 11, 2009 at 12:34 pm

I’ve hit a roadblock these past couple of weeks looking for just this sort of thing. It’s articles like this that lead me to having kept this site on my list of RSS Subscriptions. Thanks, Nick.

sabithpocker
Sep 11, 2009 at 12:35 pm

looking forward to more background based sites like fox, boxes looks boring :(

Sklep zoologiczny
Sep 11, 2009 at 5:11 pm

Wonderbra is amazing. At least some original website!

The Frosty
Sep 11, 2009 at 9:07 pm

Love those cool little CSS tricks that “break” the style.

cawlin
Sep 12, 2009 at 12:06 am

errr…you missed the “d” in z-index in your diagram.

Good list of site though!

BebopDesigner
Sep 12, 2009 at 10:12 am

Brilliant post! This is very inspiring and handy.

Keith D
Sep 13, 2009 at 4:45 am

CSS positioning is brilliant… it’s the browsers that make it fall apart.
I’ve created a few sites with overlaping images but had to spend hours making it work in internet explorer 6…
And now of course we have IE 8!
Having said all that, I’ll still try a few of your techniques.

Phoebe
Sep 13, 2009 at 7:44 am

this is awesome. thanks!

Louis
Sep 13, 2009 at 4:10 pm

Nice example, thanks for sharing.

lance
Sep 14, 2009 at 5:08 am

I bet you must be really busy this days nick, WDW got a very few updates for the past few months. :(

Goodluck!

Kris de Jong
Sep 14, 2009 at 5:28 am

Some really nice examples. Definitely gonna use it during my brainstorm sessions :) Thanks

affordable web design
Sep 14, 2009 at 6:52 am

Nice and informative just great keep it up

张筱雨人体艺术
Sep 15, 2009 at 12:24 am

这个主题很好看,www.zhangxiaoyu114 .cn向您致意

Matthew James Taylor
Sep 15, 2009 at 6:34 am

Now, f only I could put my comment out of this box! =)

Andrew
Sep 15, 2009 at 6:55 pm

On my company’s new website we made a lot of use of this same type of style – plenty of “outside of the box” design elements and a lot of implied borders without actually having a visible border. Check out all of the various interesting positioning on this overview page for example: http://www.graphicallyspeaking.ca/web-design-development/ I still love the “tin can phone” graphic at the lower left. ;)

Nick N
Sep 16, 2009 at 7:17 am

brilliant stuff, it definetely helps to break out of the box. thank you for compiling all this information, explaining it and sharing.

Nicolas Ménard
Sep 16, 2009 at 3:36 pm

Those tricks are quite clever! It answers many questions I always had about those kind of overlaping elements, thanks!

Lynn
Sep 17, 2009 at 4:06 am

Really great, thanks so much for sharing this information!

BORABORA
Sep 17, 2009 at 2:56 pm

Great post!
Exactly what I was searchig for 5 Minutes ago :)
Thanks!
Best wishes

Timothy Jones
Sep 18, 2009 at 12:01 am

Wow, remarkably high quality content as always. Also, since this is the first time that I’ve used the comment box, I want to remark that it is freaking cool as well. Web designers everywhere thank you :)

Alex Peterson
Sep 18, 2009 at 3:54 am

The wonders you can do with a few negative margins!

Kaplang
Sep 19, 2009 at 12:35 am

really nice post, thanks :)

Julia
Sep 19, 2009 at 10:57 am

Great examples! I’ll definitely consider some of the ideas in the post.

Eden Denevan
Sep 19, 2009 at 10:51 pm

added to my favorites. will definitely review again for inspiration. thanks!

Cyrus
Sep 20, 2009 at 11:04 am

Great , CSS: Design Out Of The Box
Great article. CSS saved webdesign
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Attitude Design | Graphic Design Portfolio
Sep 21, 2009 at 7:38 am

Some brilliant designs here – thanks for the post.

Ali
Sep 21, 2009 at 2:12 pm

Great tutorial… a great lesson indeed to be learned.
-Ali (yumz.net)

Squiders
Sep 21, 2009 at 6:53 pm

Great tutorial and some great examples, thank you! (www.squiders.com)

Cyrus
Sep 22, 2009 at 8:51 am

Great , CSS: Design Out Of The Box
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Web Design Australia
Sep 24, 2009 at 4:21 am

wonderbra site looks very different and I too thought it to be flash! CSS when used well can give away a really design for a website. But in some companies, table like layouts alone can give a professional feel to the site.

I liked the way huge inc site is structured too.

ass
Sep 25, 2009 at 1:18 am

hi aaaaaaa

SiteArt
Sep 25, 2009 at 5:34 am

I really like the ‘Huge’ website the extensions out of the box are nice.. but it’s the typography that makes it really shine

Juul
Sep 25, 2009 at 9:18 am

Great examples. Bravo!

Guy Labbé
Sep 26, 2009 at 8:19 am

Kewl, thanks for these great examples, this powered up my creativity in this sad hangover morning. I’m tired making too standard-looking webdesign, I shall try something new soon.

Webdesign
Sep 27, 2009 at 7:02 am

Great CSS Tutorial………….
Its very helpful to us understand Web Design

engin
Sep 27, 2009 at 11:14 am

Great CSS Tutorial………….
Its very helpful to us understand Web Design

liko
Sep 28, 2009 at 2:57 am

so excellent!!!
will get inspiration from these great works…

Dennis
Sep 29, 2009 at 10:39 am

Just a little question…does -(minus) values validate properly?

Froilan
Sep 29, 2009 at 11:39 am

gotta love the fox fringe website. awesome post.

SilkLink
Sep 30, 2009 at 6:56 am

Great article. Wondering where the word ‘layouted’ originates from, but soon got sidetracked by the wonderbra ;D

Kim
Sep 30, 2009 at 3:12 pm

Great post, and I certainly thing CSS is the next big thing, or even already is. If the web browsers could just all get along, things would be perfect.

Michael
Sep 30, 2009 at 3:33 pm

Just wanted to say that the background-position trick for the button is GENIUS, I feel so dumb for not thinking of that. Thanks!

Jason - Web Designer
Sep 30, 2009 at 5:09 pm

I always get nervous using negative positioning because of browser compatibility but I love the way the designs look. I want to try it on the next site i design.

Shane
Oct 6, 2009 at 10:38 am

Cool post, so much inspiration.
Thanks for sharing.

BASINPIPES
Oct 6, 2009 at 1:06 pm

Cool reminder about the z-index…tend to forget about that CSS ability…sometimes end up with way to many divs and classes to work around the layers.
http://www.basinpipes.com

Mckaty
Oct 7, 2009 at 2:33 am

Thank you!
It usable for me very much.

Dan
Oct 7, 2009 at 1:55 pm

Can’t get the last example to work in IE6, the margin left, float left.

Carson Shold
Oct 7, 2009 at 7:36 pm

Those are some great sites! I love the idea of breaking outside of the lines, and have taken it upon myself to incorporate that into nearly every site I do and will do in the future.

Keep up the inspirational posts,
Carson

Web Design Singapore
Oct 8, 2009 at 6:30 pm

was looking for inspiration after running out of creative juices. this sure helps a lot!

Gene
Oct 9, 2009 at 7:29 am

What does “layouted” mean?

And you were just looking at the “design” of the Wonderbra site right?

Bharat
Oct 9, 2009 at 7:48 am

Thanks for this post……
many time we forget about css ability…!.

Francisco
Oct 9, 2009 at 3:16 pm

Very nice tutorial. Thanks.

Steven Wiggins
Oct 12, 2009 at 12:23 am

That breakout-image trick is definitely a simple piece of genius. I’m still kicking myself for not seeing it from the start. Good mini-tut, too!

Jim
Oct 12, 2009 at 3:11 pm

I like the post a lot. Very inspirational, thanks.

Andrew Gerber
Oct 13, 2009 at 3:12 am

Of course all people are tired of a typical columned and boxed layout. Obviously, these techlologies are already in the past. More effective solutions already exist. Hope that great examples provided in this post will inspire readers and new ideas will appear in the end.

Radoslav Holan
Oct 15, 2009 at 1:00 pm

Thanx God for transparent PNG’s and CSS =) Good article and nice samples…

Joefrey Mahusay
Oct 16, 2009 at 12:31 am

The last example seems not working properly in IE6. Is there any way to make it work?

Autonomy
Oct 16, 2009 at 10:41 am

Thanks for some great examples to explore and the brief tutorial!

UK Hosting
Oct 16, 2009 at 7:16 pm

Many thanks for good inspiration for web designers. Waiting for CSS2 to come in play.

Check out this great offer’ 50 % special off for web designers

http://www.ukhosting.uk.com/webdesign.htm

You will be assigned a coupon code which you will need to use while purchasing and will be rewarded later on.

Cheers

rx1
Oct 17, 2009 at 4:51 pm

I like it Very nice thanks.

rx-1
Oct 17, 2009 at 4:56 pm

More effective solutions already exist. Hope that great examples provided in this post will inspire readers and new ideas will appear in the end.

UK Hosting
Oct 17, 2009 at 6:59 pm

Sorry guys for wrong link :

Here is the Offer Link :

http://www.ukhosting.uk.com/webdesigner.htm

Bryan Moore
Oct 18, 2009 at 10:06 am

Very, very cool. This has inspired me to redesign my website. The thing about web design is making something that stands out from the rest as there are millions of websites out there. Using these techniques give web pages depth and creativity. The nice thing is that as designers we can create anything to captivate an audience and this is a sure-fire way to do that. This is the next wave in innovative web design.

مركز تحميل
Oct 19, 2009 at 6:34 am

well done

kilo aldırıcı
Oct 19, 2009 at 6:35 am

thanks it is…

shoopak
Oct 21, 2009 at 2:35 am

well done!

cyprus car

Pol11
Oct 22, 2009 at 6:04 am

However, greater emphasis and energy should be devoted to economic recovery. ,

Mr.Carrot55
Oct 23, 2009 at 5:17 am

Any other advices, are welcome. ,

mohamed el metwaly
Oct 24, 2009 at 11:38 pm

nithe man
good work

Rob
Oct 25, 2009 at 6:35 pm

Got to say I’m not a big fan over using too many postion: absolutes on a page but they do play a very important part in design layout. Nice post

Jan Middleton
Oct 26, 2009 at 3:42 pm

I have noticed that some people change their blog designs like others of us change the oil in our cars or more. It is great for them, but for me? Not so much.

dana alves
Oct 26, 2009 at 11:47 pm

i would kill to work with you! i pretty much only use CSS and love it. I have so many design ideas that are completely out of the box yet everyone wants me to stick to the common layouts so that it doesn’t confuse people who are not so internet friendly. i think the only way to change this is to have more people have cool designs like you so that people get used to diff. layouts. nothings gonna change in the design world if we have to keep to the web standards of boring sites. god i wish we could design sites together.. they would be sick! i loveee you outlook on web design. awesome!

Jon
Oct 30, 2009 at 9:20 am

This is the next wave in innovative design. There are some great examples here. The big challenge is using innovation without adding too many elements and confusing people who may not be completely Internet savvy.

Jay
Oct 31, 2009 at 5:26 am

Like your posts so much

web designer in egypt
Nov 2, 2009 at 11:39 am

thanks very much it’s best collection I had ever seen

Pedz
Nov 2, 2009 at 4:16 pm

WOW!!! I can only dream of what you can do!

Pedz Rodulfo

panel radyatör
Nov 5, 2009 at 9:12 am

great tutorial thanks

ecmuscle
Nov 9, 2009 at 11:50 pm

I love your websites design, wonderful!
Excellent ideas to design out of the box, it’s an eye opener :)
Thanks

acai
Nov 17, 2009 at 6:06 am

i think the only way to change this is to have more people have cool designs like you so that people get used to diff.

Ramsey Stoneburner
Nov 18, 2009 at 3:53 pm

I’m one of the ones changing my website design regularly (for me that’s like every 2+ years). I find that in an ever evolving industry such as web design, it’s not so much as “keeping up with the Jones’s” but more an exercise in applying one’s newly learned ideas. Thanks for the great post!

fkri
Nov 26, 2009 at 2:39 am

cool beans! http://www.valetmag.com/ has a pretty good layout too. each post is styled differently

submit site bot
Nov 26, 2009 at 11:03 pm

When finishing your web. Submit site to search engine to make the best ranking.

Custom Website Design Services
Dec 3, 2009 at 12:59 pm

Great article. I love looking at different, unique and stylish website design like that. Gives me some good ideas for my own work.

Thanks.

Graphic, Web, Blog Design | BrandleDesign
Dec 3, 2009 at 1:50 pm

Great examples. It’s nice to see these screen shots side by side. Thanks for the post!

Philippines Freelance Designer
Dec 4, 2009 at 9:51 am

wow OUT of the BOX!!! really really great…. As a Philippines Freelance Designer i appreciate all the collection here… two thumbs up!!! nice design and perfect…

vincentdresses
Jan 6, 2010 at 2:02 am

喜欢你们的设计与技术,常来看看

Thorpie
Jan 19, 2010 at 4:51 am

I love all the illustrations on this site ..it’s truly inspiring and even though i’m not artistic and it is a noob question but what program or programs do i have to learn to create such art? I’ve dabbled in Photoshop and i’m super keen to learn .
Thanks

Jamie Billingham
Jan 20, 2010 at 2:08 am

I’m doing work experience with the people that designed the WonderBra site. :P

Really looking forward to it, it’ll be in May.

mohneesh
Jan 26, 2010 at 2:04 am

thanks for the tutorials of jquery they really good.

diş beyazlatma
Mar 23, 2010 at 3:38 pm

I find that in an ever evolving industry such as web design thank you

Web Design
Apr 28, 2010 at 9:18 pm

wonderfful read…gracias

Progs4u
Jul 6, 2010 at 10:59 pm

Thank you so much ..
You are very cool

filesforflash
Jul 20, 2010 at 1:21 pm

great examples

Penang Web Design
Aug 2, 2010 at 1:21 am

thanks for sharing….

Jai
Aug 26, 2010 at 5:56 am

Hi,

Currently i am working on a re-design of http://www.games24x7.com's landing page. If any one give me good idea where design say about Rummy.

Thanks
Jai.

apple
Sep 21, 2010 at 7:00 am

very good examples nice work

Edward
Oct 13, 2010 at 9:11 pm

Thank you the margin left tut really help me out :)

baagdi designer
Oct 18, 2010 at 2:48 pm

hey thanks for margine left example it helps me out

Azad
Oct 19, 2010 at 9:02 am

Wow… I must say that this website looks wonderful.
The posts are very informative, thanks a lot.. :)

willsosdan
Dec 9, 2010 at 3:53 am

I used to think that Cheap uggs outlet UK were the ugliest I had ever seen.

willsosdan
Dec 9, 2010 at 3:54 am

I used to think that Cheap UK were the ugliest uggs outlet I had ever seen.

Henry Peise
Dec 24, 2010 at 1:47 am

Want to make some change to your iphone 4? white iphone 4 Conversion Kit will be your best choice! Come and try on!

Juno Mindoes
Dec 25, 2010 at 1:17 am

White iphone 4 Conversion Kit is now the hottest iphone 4 piece that you should get!

Uçak Bileti
Jan 12, 2011 at 5:32 am

senin şerefine emmoğlu

altın çilek
Feb 2, 2011 at 7:01 am

very good examples nice work

dexx
Apr 17, 2011 at 2:33 pm

Different thinking, contains a problem to produce several possible solutions.

complex 41
Aug 4, 2011 at 10:13 am

Complex 41 saç bakım seti, tamamen bitkisel ve doğal içeriği nedeniyle güvenle kullanabileceğiniz bir üründür. complex 41İçeriğindeki bitki özlerine
(55 çeşit bitkinin özü vb.) aşırı hassasiyeti olan kişilerde saç derisinde bir miktarkızarıklık yapması doğaldır. Bu durumda kullanım sıklığını azaltmanız tavsiye edilmektedir.

Asigurari Locuinte
Oct 9, 2011 at 3:50 am

I love the way the patterns move into one another.

Tresor T-mac
Oct 26, 2011 at 12:48 am

I love it

Alhasooob
Nov 13, 2011 at 4:49 pm

this is good Thank You

Wordpress Web Designer
Dec 19, 2011 at 3:44 pm

I love coming to websites that show out of the box designs that aren’t duplicates of other website postings. Thanks!

Omsoftech
Jan 16, 2012 at 3:57 am

OMG…It’s awesome design… i like it…Thanks for….

Web Designer Philippines
Jan 26, 2012 at 9:45 am

Very inspirational examples and tutorial. Thanks for sharing.

wordpress development company
May 12, 2012 at 7:39 am

Last wordpress themes looks is cool dude…

Luke Tao
Jun 23, 2012 at 1:05 am

I’m still learning from you, but I’m trying to reach my goals. I certainly enjoy reading all that is posted on your site.Keep the stories coming. I liked it!

Post Comment or Questions

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.