{"id":309,"date":"2009-09-10T03:53:27","date_gmt":"2009-09-10T08:53:27","guid":{"rendered":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/tutorials\/css-design-out-of-the-box\/"},"modified":"2019-02-28T10:22:44","modified_gmt":"2019-02-28T15:22:44","slug":"css-design-out-of-the-box","status":"publish","type":"post","link":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/tutorials\/css-design-out-of-the-box","title":{"rendered":"CSS: Design Out Of The Box"},"content":{"rendered":"

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.<\/big><\/p>\n

Example 1:<\/em> Huge Inc<\/h3>\n

What really captured my attention on the Huge<\/a> site is the header design. Notice how the design elements are extended out of the box. <\/p>\n

\"screenshot\"<\/a><\/p>\n

Additional Screencaps: 2<\/a> , 3<\/a><\/em><\/p>\n

Example 2:<\/em> Jason Santa Maria<\/h3>\n

With the amount of effort and details that Jason<\/a> 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.<\/p>\n

\"screenshot\"<\/a><\/p>\n

Additional Screencaps: 2<\/a> , 3<\/a><\/em><\/p>\n

Example 3:<\/em> A Brief Message<\/h3>\n

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).<\/p>\n

\"screenshot\"<\/a><\/p>\n

Additional Screencaps: 2<\/a> , 3<\/a><\/em><\/p>\n

Example 4:<\/em> Trent Walton<\/h3>\n

TrentWalton.com<\/a> puts the focus on the header, where each post displays a different background image and typesetting.<\/p>\n

\"screenshot\"<\/a><\/p>\n

Additional Screencaps: 2<\/a> , 3<\/a><\/em><\/p>\n

Example 5:<\/em> Wonderbra Ultimate Strapless<\/h3>\n

Although there are some accessibility issues with the Wonderbra<\/a> 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<\/a>.<\/p>\n

\"screenshot\"<\/a><\/p>\n

Additional Screencaps: 2<\/a> , 3<\/a><\/em><\/p>\n

Example 6:<\/em> Fox<\/h3>\n

Fox – Fringe<\/a> 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.<\/p>\n

\"screenshot\"<\/a><\/p>\n

Additional Screencaps: 2<\/a> , 3<\/a><\/em><\/p>\n

Example 7:<\/em> Mezzoblue<\/h3>\n

Mezzoblue<\/a> made the image extend off the grid. This can be easily achieved by using the margin-left<\/code> property with negative value.<\/p>\n

\"screenshot\"<\/a><\/p>\n

Quick CSS Tutorials<\/h3>\n

Using CSS Absolute Position (view demo<\/a>)<\/h4>\n

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

\"margin-left\"<\/a><\/p>\n

Using background image (view demo<\/a>)<\/h4>\n

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

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.<\/p>\n

\"background<\/a><\/p>\n

Using margin-left (view demo<\/a>)<\/h4>\n

This one is extremely simple. Just specify the image with negative margin-left<\/code> and float:left<\/code>.<\/p>\n

\"margin-left\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[31,1],"tags":[21,26,9],"class_list":["post-309","post","type-post","status-publish","format-standard","hentry","category-featured","category-tutorials","tag-css","tag-design-trends","tag-inspiration"],"yoast_head":"\nCSS: Design Out Of The Box - Web Designer Wall<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS: Design Out Of The Box - Web Designer Wall\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box\" \/>\n<meta property=\"og:site_name\" content=\"Web Designer Wall\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/www.facebook.com\/webdesignerwall\" \/>\n<meta property=\"article:published_time\" content=\"2009-09-10T08:53:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-28T15:22:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nickla\" \/>\n<meta name=\"twitter:site\" content=\"@nickla\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box\",\"url\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box\",\"name\":\"CSS: Design Out Of The Box - Web Designer Wall\",\"isPartOf\":{\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#primaryimage\"},\"image\":{\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg\",\"datePublished\":\"2009-09-10T08:53:27+00:00\",\"dateModified\":\"2019-02-28T15:22:44+00:00\",\"author\":{\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\"},\"breadcrumb\":{\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#primaryimage\",\"url\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg\",\"contentUrl\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS: Design Out Of The Box\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#website\",\"url\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/\",\"name\":\"Web Designer Wall\",\"description\":\"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"sameAs\":[\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\"],\"url\":\"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS: Design Out Of The Box - Web Designer Wall","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box","og_locale":"en_US","og_type":"article","og_title":"CSS: Design Out Of The Box - Web Designer Wall","og_description":"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 […]","og_url":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box","og_site_name":"Web Designer Wall","article_publisher":"https:\/\/proxy.goincop1.workers.dev:443\/https\/www.facebook.com\/webdesignerwall","article_published_time":"2009-09-10T08:53:27+00:00","article_modified_time":"2019-02-28T15:22:44+00:00","og_image":[{"url":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg","type":"","width":"","height":""}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_creator":"@nickla","twitter_site":"@nickla","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/proxy.goincop1.workers.dev:443\/https\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box","url":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box","name":"CSS: Design Out Of The Box - Web Designer Wall","isPartOf":{"@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#primaryimage"},"image":{"@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#primaryimage"},"thumbnailUrl":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg","datePublished":"2009-09-10T08:53:27+00:00","dateModified":"2019-02-28T15:22:44+00:00","author":{"@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84"},"breadcrumb":{"@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#primaryimage","url":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg","contentUrl":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-content\/uploads\/2009\/09\/hugeinc.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/tutorials\/css-design-out-of-the-box#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/"},{"@type":"ListItem","position":2,"name":"CSS: Design Out Of The Box"}]},{"@type":"WebSite","@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#website","url":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/","name":"Web Designer Wall","description":"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/","url":"https:\/\/proxy.goincop1.workers.dev:443\/https\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","contentUrl":"https:\/\/proxy.goincop1.workers.dev:443\/https\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"sameAs":["https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.mystagingwebsite.com"],"url":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/comments?post=309"}],"version-history":[{"count":2,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/309\/revisions"}],"predecessor-version":[{"id":4918,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/309\/revisions\/4918"}],"wp:attachment":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/media?parent=309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/categories?post=309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/webdesignerwall.com\/wp-json\/wp\/v2\/tags?post=309"}],"curies":[{"name":"wp","href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/api.w.org\/{rel}","templated":true}]}}