Click here to Skip to main content
11,645,087 members (63,930 online)
Click here to Skip to main content

ASP.NET Dynamic Gradient Handler

, 31 Dec 2007 CPOL 45.3K 461 41
Rate this:
Please Sign up or sign in to vote.
Create browser-independent gradients dynamically with an ASP.NET IHttpHandler.

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)
{
    // parse the parameters
    int length = int.Parse(this.lengthBox.Text);
    Color startColor = ColorTranslator.FromHtml(this.startColorBox.Text);
    Color finishColor = ColorTranslator.FromHtml(this.finishColorBox.Text);

    // generate css declaration
    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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jake Morgan
Chief Technology Officer Elsinore Technologies, The Issue Management Expert
United States United States
Jake Morgan
Chief Technology Officer

CTO Jake Morgan brings a diverse background and over 7 years of software development experience to Elsinore, having created successful software applications in both the public and private sector, and founding a wildly popular online community.

Before joining Elsinore in 2005, Jake led the design and development of the NC FAST Online Verification system, used by the NC Department of Health and Human Services to verify eligibility for billions of dollars in benefits. He also spent time at Nortel Networks and founded the TheWolfWeb.com, a vibrant online community for NC State students, which supported over 15 million page views a month. At Elsinore he oversees the design and development of IssueNet Issue Management Software.

Jake is an alumnus of NC State University, where he received a BS in Mechanical Engineering.

You may also be interested in...

Comments and Discussions

 
QuestionCannot get it to work Pin
Adam Menkes11-Sep-09 20:44
memberAdam Menkes11-Sep-09 20:44 
GeneralVery handy, Thanks Pin
iamstarbuck3-May-09 2:13
memberiamstarbuck3-May-09 2:13 
QuestionDynamic Length??? Pin
asder434-Apr-09 1:21
memberasder434-Apr-09 1:21 
QuestionAwesome Tool But Problem with deployment Pin
Member 367024714-Feb-09 2:42
memberMember 367024714-Feb-09 2:42 
AnswerRe: Awesome Tool But Problem with deployment Pin
Tuan Tran Anh19-Feb-09 18:10
memberTuan Tran Anh19-Feb-09 18:10 
GeneralGradient Button Pin
alex2320-Oct-08 0:22
memberalex2320-Oct-08 0:22 
QuestionFantastic Code, a question though Pin
lordcook9914-Feb-08 3:11
memberlordcook9914-Feb-08 3:11 
GeneralI like this Pin
Mike Ellison28-Jan-08 8:03
memberMike Ellison28-Jan-08 8:03 
QuestionNice One But Can we do it in .Net 1.1? Pin
Gandalf - The White22-Jan-08 0:11
member Gandalf - The White22-Jan-08 0:11 
AnswerRe: Nice One But Can we do it in .Net 1.1? Pin
Jake Morgan24-Jan-08 4:50
memberJake Morgan24-Jan-08 4:50 
GeneralYou are complicating it! Pin
Adam Tibi7-Jan-08 4:06
memberAdam Tibi7-Jan-08 4:06 
GeneralRe: You are complicating it! Pin
Jake Morgan24-Jan-08 4:30
memberJake Morgan24-Jan-08 4:30 
GeneralNice Idea Pin
Abhijit Jana2-Jan-08 2:21
member Abhijit Jana2-Jan-08 2:21 
GeneralVB Code Pin
Bidyut_Saha1-Jan-08 21:35
memberBidyut_Saha1-Jan-08 21:35 
GeneralGood idea Pin
King_kLAx1-Jan-08 1:11
memberKing_kLAx1-Jan-08 1:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150731.1 | Last Updated 31 Dec 2007
Article Copyright 2007 by Jake Morgan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid