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%);