Just because everything in CSS is a box doesn’t mean that everything has to look like a box.
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:
- tile background images with uneven non-congruent edges to break up rectangularity
- use CSS sprites (or variations thereof) to create non-rectangular buttons
- use CSS3 and PNG shadows to create depth
border-radiusto soften corners and make circles
- judiciously use
relativepositioning to layer and overlap elements
- use CSS3 transformations (or images manipulated in PhotoShop) to set things off-kilter
- use inline styles to stagger aligned elements
- use worn, dirty, torn-up textures and colour effects rather than simple primary hues