How do I modify IE Gradient CSS to use height and a third color?


Tags: internet-explorer,css3,styles,stylesheet,linear-gradients

Problem :

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?



Solution :

The best way to do gradients on IE8/9 is to use CSS3Pie.

This is a Javascript polyfill library that implements the standard CSS gradient syntax into old versions of IE. (it also does a few other features like border-radius).

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.


    CSS Howto..

    How to center right-aligned numbers in table column using CSS?

    How to make Firefox button respect padding?

    How can I scale element height and width using CSS?

    Shadow DOM: how to apply CSS style only if the host element is ?

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    How to make inner div of Flexbox height of parent

    How to get the click position on a page when a css zoom is involved

    How to modify and save html/css in server-side?

    How to change height of ui-grid row?

    How do i get a font to show up smooth like this?

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    How can I use dropdowns in a masonry layout?

    On Edge Browser, how to change input placeholder text color using CSS?

    how to select one element in jQuery

    How to override the css using the JQuery

    how are large quantities of css templates produced?

    How to get the child of a parent div element

    How to access my .png from a folder using CSS?

    A scrollbar showing within DIV. What CSS is causing this?

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How can I rotate(or change) background image using CSS and Javascript

    How can I include a CSS stylesheet in an XSL document for Internet Explorer?

    How to load up CSS files using Javascript?

    jquery how to regex css style positive to negative, negative to positive?

    How to increase width of children from the right to the left? [closed]

    How can I transform dots to line between CSS menu items?

    How to resize a Java Script element to fit its container window

    How to make a Xul button bigger using css as it get focus?

    How to reduce the gap between HTML5 video tag