Introduction
Gradients are an essential tool for any serious graphic designer. Disciplined use of gradients can provide a simple professional touch to virtually any graphical layout. However, HTML and CSS provide no intrinsic support for gradients. Generally, a tool such as Photoshop is used to save a static image file that is then tiled as a background. While this approach is effective, it can be tedious and inflexible because it requires an additional tool to manage the images.
The GradientHandler
can eliminate needless steps when dealing with simple linear gradients. Gradients are defined with URL parameters, leading to a much more manageable code base.
Background
Only a basic ASP.NET understanding is needed to use the GradientHandler
. However, knowledge of GDI+ and the ASP.NET IHttpHandler
interface is needed to fully understand the inner workings.
Using the code
The GradientHandler
can be easily configured for any .NET 2.0 or greater application. The files GradientHandler.cs and Utility.cs should be copied to the /App_Code directory under the root of the application. The Web.config file needs to include a declaration to map the GradientHandler
class to a URL. Our examples map to Gradient.axd:
<system.web>
<httpHandlers>
<add path="Gradient.axd" verb="GET"
type="Elsinore.Website.GradientHandler"/>
</httpHandlers>
</system.web>
The GradientHandler
can be used most simply with a reference in the CSS:
body
{
background: Black url(Gradient.axd?Orientation=Horizontal&
Length=300&StartColor=000000&EndColor=FFFFFF) repeat-y;
}
This produces the following background on a simple page:
The GradientHandler
can also be referenced programmatically, opening up more options. The following code allows the user to specify the gradient parameters:
Markup:
<body runat="server" id="body">
<form id="form1" runat="server">
Length:
<asp:TextBox runat="server" ID="lengthBox" Text="300" />
<br />
StartColor:
<asp:TextBox runat="server" ID="startColorBox" Text="#F00" />
<br />
FinishColor:
<asp:TextBox runat="server" ID="finishColorBox" Text="#0F0" />
<br />
<asp:Button runat="server" Text="Submit" />
</form>
</body>
Code:
protected void Page_Load(object sender, EventArgs e)
{
int length = int.Parse(this.lengthBox.Text);
Color startColor = ColorTranslator.FromHtml(this.startColorBox.Text);
Color finishColor = ColorTranslator.FromHtml(this.finishColorBox.Text);
string backgroundUrl = GradientHandler.GetUrl(Orientation.Vertical,
length, startColor, finishColor);
string backgroundCss = string.Format("{0} url({1}) repeat-x",
this.finishColorBox.Text, backgroundUrl);
this.body.Style.Add("background", backgroundCss);
}
In this example, the user can specify the length, the start color, and the finish color of the gradient. The static method GradientHandler.GetUrl
is called with these parameters, and the declaration is added to the body
tag. The result is as follows:
A live demo of this example is available at www.elsitech.com.
Points of interest
The GradientHandler
specifically generates linear gradients, but other graphical shortcomings in HTML and CSS can also be solved with dynamic generation using ASP.NET HTTP handlers and GDI+. Rounded rectangles, advanced text effects, and image filters are just some of the opportunities.