Flexible Layout Color with CSS3 Gradients

Sometimes designers will get imaginative and create what I call an “infinite sidebar”. This is when you have a column of content on a webpage with a background color that extends to the edge of your screen (while still maintaining a fixed width for the wrapping element of the pages content – for centering purposes).

This sort of thing may initially seem like it wouldn’t really work but thankfully implementing this on a web layout is simple thanks to CSS gradients.

CSS gradients can be a headache to keep up with – the syntax is not the same across the board for browsers. We at matrix use Compass to make our lives easier. The relevant SASS that generates the gradient in this example:

.wrap {
	@include background(linear-gradient(left, #FFF 50%, #2980b9 50%));

The basic idea is you have two columns, one white and one blue. To create the illusion of an “infinite sidebar” a CSS gradient (left half white – right half blue) is applied to a “wrap” element, which the layout elements are contained within.

The color stop of the CSS gradient is hidden by an “inner” element (the container with a fixed or max-width). The “inner” element has a white background color, is centered on the page and is positioned on top of the wrap element.

Flexible Layout Color - demo image 1

If you then apply the same color from the gradient to the second column within the “inner” element you’ll have the “infinite sidebar” effect:

Flexible Layout Color - demo image 2

Of course the best way to understand what’s going on is to inspect the demo I’ve set up and then try it for your self!

This also gracefully degrades in browsers that don’t support CSS gradients (check it out on IE9 or less – it looks like a standard sidebar with a background color)

View the demo here.

What’s your favorite CSS design trick?

Leave a Reply

Your email address will not be published. Required fields are marked *