How do I modify IE Gradient CSS to use height and a third color?
I have the following CSS for Gradients:
For IE 8-9
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d6d2',] endColorstr='#f9ffff', GradientType=1); /* IE 8–9 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d6d2', endColorstr='#f9ffff', GradientType=1)";
For IE 10
background: -ms-linear-gradient(top, #d7d6d2 0%,#f9ffff 437px,#ffffff 100%);
For the IE 10 version I have 3 colors. The first two create the gradient and the third color, which is #ffffff, shows the rest of the page in white color when the gradient has ended. And the 437px defines the height of the gradient.
How can I modify the code for IE 8-9 for CSS Gradients so I can achieve what I have with the IE 10 version?
The best way to do gradients on IE8/9 is to use CSS3Pie.
Simply download the Pie.htc file and add it to your site as per the instructions, and you can start using standard CSS gradients in IE 6-9.
To directly answer your question: CSS3Pie's gradients do support gradient colour stops. (But even without that, the improved syntax over
-ms-filter is enough motivation for me to want to use it)
Hope that helps.