Create a Radial Gradient for Internet Explorer 6/7/8

Create a radial gradient for Internet Explorer 6/7/8

Live Demo

#element{
    background: #fff; /* The color you want for the radial gradient */
    width:100px; 
    height:100px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2);
}

Link where I got the info

Radial Gradient

For the Radial Gradient we have to create a div-elements. This element
is a Overlay for the background. Than we'll use the Alpha-Filter.
Alpha will make this element transparent in a special style. style=2
is a radial alpha. This means that the center of the element will be
full colored (opacity=100) and the opacity will lose to the edges
(finishopacity=0)

Using ellipse as gradient for IE-9

I think I have bad news for you.

IE9 dropped support for the old IE-specific filter styles -- ie the ones that you pointed out in the other question you linked to.

The intention was that IE9 was supposed to be properly standards compliant, and those filter styles were non standard so they were dropped. At the same time, the idea was all the functionality provided by those styles was being replaced by standards-based CSS features.

Unfortunately, as you're finding, not quite all of the functionality was replaced with standard CSS in IE9. In particular, CSS gradients were a noticeable omission and have caused a lot of code to be written using awkward work-arounds.

The bottom line is that IE9 specifically has a particular blind-spot in this area, where newer IE versions and even the older ones do support this feature one way or another.

Your only real ray of light is that IE9 usage has dropped through the floor recently; hardly anyone is still using it. So my advice is that you can probably get away with having a fall-back solution that just uses a plain background colour; let IE9 have that and concentrate on the newer browsers that people do actually use.

Table cell loses border when css gradient filter is applied in IE8

I've found a fix but you may not like it...

If you render in IE in quirks mode the border renders fine, it is only obscured if you're using compatibility mode. Compare these two pages in IE8:

• With a DOCTYPE declaration

  • 
    _{(source: boogdesign.com)}

• Without a DOCTYPE declaration

  • 
    _{(source: boogdesign.com)}

What also works is clicking the compatibility view button, but my attempts to get the same results with the compatibility mode meta tags were unsuccessful. I tried using box-sizing, but also with no success. I conclude the only way to get it to work as you want is to force IE into quirks mode, but that may create so many other issues for layout that you may be better off just adding a wrapper element to attach your gradient background to.

Make body fill entire screen?

html, body {
    margin: 0;
    height: 100%;
}

from green to red color depend on percentage

This may be more than you need, but this lets you set up any arbitrary color map:

var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
};

---

Related Topics