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 manage div positionning?

    CSS - How to prevent the DIV without content from shrinking

    site only shows half screen on mobile? Rest of screen is just body background?

    How can I wrap content around a UL CSS Menu so content is seamless?

    How to combine wildcard and not selectors in CSS

    Issue with changing how containers look based on values in an MD array

    How to avoid background image tile when browser window resizes

    How to create slideshow in css without having to make more than one class?

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    How can I bold specific HTML rows and columns with CSS or HTML?

    How to use custom field to add class to a post?

    How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

    how to define multiple classes' hover event in css?

    How to style a video iFrame?

    How could I make a menu dropdown on click

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    How to solve css issue to display image caption?

    How to make CSS animation happen the moment the website loads

    HTML + CSS layout with bottom box showing all content, variable height top box with scroll

    how to div.width css property using js or jquery?

    How to rotate and translate using CSS in IE8?

    How to make a round mask over a image

    How to get width of an image after setting the height

    Element width based on how many siblings are present

    how to have a menu across top with links left aligned and right aligned

    How to make sure CSS/JS files are not cached on browser? [duplicate]

    How to set css font-size for text input from style sheet

    how to make this (table) using divs and css

    How do you use nth-child(odd) on table rows but you want some rows to be exempted from the css rule?

    How to pass array from method to property using PHP