How to "CSS3 Gradient in Windows Phone 7"? - html

Question

I'm working in WP7 where my application is based in HTML5 and I'm exporting the app through PhoneGap framework.
I want to know if is possible and how to generate a CSS3 gradient for this project (and in the process, I want to share you what I've discovered).
At the moment this is my CSS3 code:
body {
background: brown;
background-image: url(blue_to_white.jpg);
background: linear-gradient(blue, red); /*future CSS3 browsers*/
background: -webkit-linear-gradient(blue, orange); /*new webkit*/
background-image: -ms-linear-gradient(bottom, blue 50%, green 50%); /* IE10 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='purple'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='yellow')"; /* IE8 */
-pie-background: linear-gradient(blue, silver); /*PIE*/
behavior: url(PIE.htc);
}
As you can see, my code is using different techniques for the background:
A brown like color base
An image like gradient of blue to white
A normal CSS3 gradient of blue to red
A CSS3 gradient for webkit browsers of blue to orange
A CSS3 gradient for Microsoft browsers of blue to green
A DXImageTransform for IE6 & IE7 of blue to purple
A DXImageTransform for IE8 of blue to yellow
A pie-background using CSS3PIE of blue to silver
And this is my results:
As you may know, the browser for WinPhone 7.5 is IE9 Mobile, and the browser for WinPhone 7.0 is a mix between IE7 & IE8. Here into slide 16, 17 and 18 explains which CCS3 properties are implemented in IE9, IE10 and "IE9 Mobile": http://goo.gl/1Wz3s
So, Any idea of how to generate a CSS3 gradient in Windows Phone?
or I have no choice and I must implement an image to create this gradient?

Answer 1

Just wanted to show the correct syntax for CSS3 Gradients in IE10+
background: -ms-linear-gradient(
bottom,
#432100 30%,
#00AAAA 70%);
In the google code link posted by JC Del Valle, he is using a backgroung-image definition, which is not correct.
[stack overflow prevented me from inserting image]
In the screen capure at twitter link (#palermo4), I tested your styles as-is. It appears to be working. Something else is in conflict with your CSS3 stuff.