feature request - gradient backgrounds

[GoogleCodeExporter]

-moz-linear gradient(),-moz-radial-gradient() and
-webkit-gradient(linear|radial) all exist

I know that it is possible to use either -ms-filter or vml eg
<v:rect fillcolor="red">
<v:fill ID="grad" color2="blue" type="gradient" angle="180">
</v:rect>

which will do a gradient (the example given will transition from red at the
top to blue at the bottom - change angle="90" to do a left to right gradient)

I just can't work out how to generate this from a -moz-linear-gradient

Any help gratefully received

Original issue reported on code.google.com by jwatts...@googlemail.com on 11 Feb 2010 at 3:42

[GoogleCodeExporter]

gradient for IE, MOZILLA, SAFARI

background:#000000;
    /* Mozilla: */
        background: -moz-linear-gradient(top, #000000, #5A9E28);
        /* Chrome, Safari:*/
    background: -webkit-gradient(linear,left top, left bottom, from(#000000), to
(#5A9E28));
        /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000000', 
EndColorStr='#5A9E28', GradientType=0);

Original comment by J.Rowley...@gmail.com on 15 May 2010 at 6:13

[GoogleCodeExporter]

The combination of Microsoft's gradient implementation with curved corner 
doesn't work. You just get a square. It would be nice if it would work.

Original comment by flrnb...@gmail.com on 11 Jun 2010 at 12:18

[GoogleCodeExporter]

I can definitely see the issue here:  

Because the script is currently zapping the target element's 
background/borders, and replaces with a RECT/FILL -- the script has a 
responsibility to ensure that ANY known background schemes are passed to the 
VML fill, including linear-gradient.

Possible resolution:

Sniff for liner-gradient on background-image, where CSS3 has it, via 
currentStyle -- the tricky part is parsing it into something VML can understand 
-- there seems to be a few competing methods that all have slightly different 
functionality ... Fortunately, a cursory review of the MSDN docs implies that 
VML can handle pretty much any kind of gradient thrown at it, both the various 
old and the new css3 standard.

Some references I'll need later:

http://webdesignerwall.com/tutorials/cross-browser-css-gradient -- kind of old
http://gradients.glrzad.com/ -- far more modern, css3 gradient generator
https://developer.mozilla.org/en/CSS/linear-gradient -- moz docs
http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx -- fill docs
http://msdn.microsoft.com/en-us/library/bb229603(v=vs.85).aspx -- colors docs
http://msdn.microsoft.com/en-us/library/bb229599(v=vs.85).aspx -- angle docs

Original comment by tyler.wa...@gmail.com on 2 Oct 2011 at 8:12

• Changed state: Accepted
• Added labels: Usability