How to avoid boxy Web design

With CSS

Version 1.1

Beginners often create Web design that is boxy and cramped--and who can blame them? The building blocks of Web pages--div tags--are rectangles. But good design needs to breathe, so that the page seems like one coherent fabric rather than a collection of klunky boxes. Here are some ways to use CSS to design your way "out of the box."

Images

Use a big background image that fades gracefully into a carefully chosen background color. Sample


body {
	background: brown url( explosion.jpg ) no-repeat ;					
}

Tweak the opacity of your overlays so the background image or a watermark shows through. Sample


#watermark {
	opacity: .7 ;	
}

Use silhouetted PNGS with transparent backgrounds when possible (eg, as icons). Sample

Use an image mask to create a shaped border (such as a disk) for images. Sample

Edges

Use only one edge of the CSS border style to separate blocks (to emulate a vertical or horizontal rule). Sample


.text-box {
	border-bottom: silver solid 1px ;	
}

Round your div corners ; these properties work in non-IE browsers. Sample


.text-box {	
	border-radius: 10px ; 
}

Colors

Choose a gradient for background or box fills. Sample


body {
	background-image:
		linear-gradient(
			to top right,
			darkGoldenrod,
			red
		)
	;
}
div {
	background-image:
		radial-gradient(
			circle at bottom left,
			darkGoldenrod,
			Goldenrod 40%,
			red
		)
	;
}

Decrease the contrast in your color palette--choose hues closer in tone and value. Sample

Overlay images with a div with a transparent hue keyed to the dominant palette (or tint your banner etc. accordingly in PhotoShop). Sample

Links

Replace underlines with text-shadow or dots.


a {
	text-decoration: none ;
	border-bottom: dotted 1px ; 
}
a:hover {
	border-bottom: solid 1px ;			
}

Interaction

Animate in content (eg, via :hover or jQuery transitions) to display boxy content only when necessary, eg on rollover.

Sample


#animate-div {
	width: 10% ;
}
#animate-div:hover {
	width: 100% ;
	transition: all 1s ease-in-out ;
}