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.
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.
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).
Example 4: Trent Walton
TrentWalton.com puts the focus on the header, where each post displays a different background image and typesetting.
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.
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.
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.
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).
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.
Using margin-left (view demo)
This one is extremely simple. Just specify the image with negative margin-left and float:left.
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.
hi aaaaaaa
I really like the ‘Huge’ website the extensions out of the box are nice.. but it’s the typography that makes it really shine
Great examples. Bravo!
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.
Great CSS Tutorial………….
Its very helpful to us understand Web Design
Great CSS Tutorial………….
Its very helpful to us understand Web Design
so excellent!!!
will get inspiration from these great works…
Just a little question…does -(minus) values validate properly?
gotta love the fox fringe website. awesome post.
Great article. Wondering where the word ‘layouted’ originates from, but soon got sidetracked by the wonderbra ;D
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.
Just wanted to say that the background-position trick for the button is GENIUS, I feel so dumb for not thinking of that. Thanks!
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.
Cool post, so much inspiration.
Thanks for sharing.
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
Thank you!
It usable for me very much.
Can’t get the last example to work in IE6, the margin left, float left.
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
was looking for inspiration after running out of creative juices. this sure helps a lot!