I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Breaking Out of The Box: Creating Non-Rectangular Web Designs

css / layouts

Estimated reading time: 1 minute, 15 seconds

Just because everything in CSS is a box doesn’t mean that everything has to look like a box.Manhole

The fact is that the CSS box model lends itself to grid-based designs. Consistent, and with a legacy of strong support from the print world, grids are the design foundation of millions of pieces of work. But grids can also be limiting: when every other website is a two or three-column design rendered in primary colours, it can be hard to make yours stand out.

A common reaction is to break out of the grid: to deliberately set elements off-kilter. This is harder than it appears: the process is never random, and involves as much (if not more) design consideration as any grid-based method.

It is my intention to show the design and development process for a non-grid website in several instalments over the next few months. From a practical standpoint, the techniques used to create non-rectangular web page designs might be summarized as follows:

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.