Construct Web

CSS Geeks and our never ending desire to eschew using graphics at all cost if it can be done with CSS.

Gradients are the rage ( Well CSS3 is as well as Progressive Enhancement ) This post is basically about getting gradients to work cross browser ( yes IE6 +), but let as usual I had major help here are a couple of online tools which are amazing, Ultimate CSS Gradient Generator and CSS3 Generator .

All moderns browsers have no problem with this. As usual it’s IE that the problem. After some mildly painstaking research I finally got it to work with the CSS below:

{
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 95%, rgba(243,243,243,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(95%,rgba(237,237,237,1)), color-stop(100%,rgba(243,243,243,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 95%,rgba(243,243,243,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 95%,rgba(243,243,243,1) 100%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 95%,rgba(243,243,243,1) 100%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#e5e5e5'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#e5e5e5')"; /* IE8 */
border-bottom: 1px solid #ccc;
border-top: 1px solid #e5e5e5;
zoom:1;
}


The “zoom: 1″ makes this work is IE – IE needs and it’s has layout issue.
anyway the results are ok – IE is limited to only linear gradients however, that was all I needed so I was safe.

The Most Important CSS3 Properties Explained

Great review to get going with CSS3 – and don’t forget Progressive enhancement