Faux Columns Revistited

It’s time to update Dan Cederholm’s faux columns to take advantage of CSS3 gradients and reduce http requests.

I’ve put a demo on Github where you can also see the source code.

Two columns, both with solid colours

background: #fff url(css3faux-i/cols.png);
background-image: -o-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: -moz-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: -webkit-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: -ms-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: linear-gradient(left, #fff 639px, #bed751 640px);

Two columns, with a one pixel divider

background: #fff url(css3faux-i/div.png);
background-image: -o-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: -moz-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: -webkit-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: -ms-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);

Two columns, one with a gradient

background: #fff url(css3faux-i/gradient.png);
background-image: -o-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: -moz-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: -webkit-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: -ms-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
Published
Categorized as Code Tagged

By Peter Wilson

Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development. Peter’s a big fan of musical theatre and often encourages his industry colleagues to join him for a show or two in New York or in the West End.