CSS gradient on C# using
CityLizard Framework. Works in IE 5.5-8.0, FireFox 3.6, Chrome 8.0, Safari 5.0 and Opera 10.
namespace Css
{
using S = www_w3_org._2000.svg.X;
using D = System.Drawing;
class Gradient
{
class Svg : S
{
public T.svg Gradient(string start, string end)
{
return
svg_(width: "100%", height: "100%")
[defs
[linearGradient_(
id: "grad",
x1: "0",
y1: "0",
x2: "0",
y2: "100%")
[stop_(offset: "0", stop_color: start)]
[stop_(offset: "1", stop_color: end)]
]
]
[rect_(
width: "100%",
height: "100%",
x: "0",
y: "0",
style: "fill:url(#grad)")
];
}
}
static string X2(byte x)
{
return x.ToString("X2");
}
static string ToString(D.Color c)
{
return "#" + X2(c.R) + X2(c.G) + X2(c.B);
}
static byte Avg(byte a, byte b)
{
return (byte)((a + b) / 2);
}
static D.Color Avg(D.Color a, D.Color b)
{
return D.Color.FromArgb(
Avg(a.R, b.R), Avg(a.G, b.G), Avg(a.B, b.B));
}
public static string Y(D.Color Start, D.Color End)
{
var s = ToString(Start);
var e = ToString(End);
var svgB = new Svg().Gradient(s, e).ToString();
var svg = "";
foreach (var c in svgB)
{
var x = (int)c;
if (x <= 0x40)
{
svg += "%" + x.ToString("X2");
}
else
{
svg += c;
}
}
// Next browsers to test: Opera 11 (hopefully it has CSS gradient),
// IE 9.
return
// for other browsers.
"background: " + ToString(Avg(Start, End)) + ";" +
// Opera 10. It also works for Chrome and Safari.
"background: url(\"data:image/svg+xml," + svg + "\");" +
// IE 5.5-8.0.
"filter: progid:DXImageTransform.Microsoft.gradient(" +
"startColorstr='" +
s +
"', endColorstr='" +
e +
"');" +
// webkit browsers (Chrome, Safari). It is not required
// because SVG gradient for Opera works fine for these
// browsers.
/*
"background: -webkit-gradient(" +
"linear, left top, left bottom, from(" +
s +
"), to(" +
e +
"));" +
*/
// FireFox 3.6+
"background: -moz-linear-gradient(top, " + s + ", " + e + ");";
}
}
}
