Using Gradient Shading in Web Pages

In his book Code Complete, Steve McConnell wrote:

"Don't limit your programming thinking only to the concepts that are supported automatically by your language [or tool]. The best programmers think of what they want to do, and then assess how to accomplish their objectives with the programming tools at their disposal."

McConnell is right. Without this outside-the-box thinking, new language idioms would probably never be invented. Of course, you should make sure you know about everything inside the box as well, so you don't needlessly reinvent the wheel. In Web programming, the box is very big indeed and has many corners, nooks, and crannies.

This article looks in one of those nooks in the Cascading Style Sheet (CSS) section: filters. There are all kinds of filters that add neat effects to your Web pages. The one demonstrated here adds a gradient coloring effect that you can apply to anything that needs a little lively coloring (in moderation, please).

Reviewing the Elements of a Gradient Filter

You can use cascading style sheets to organize style information in a single location. (You can also embed styles and add them inline, but that's another article.) The filter is an attribute of a style. The filter attribute affects some change on the thing to which it is applied.

The gradient filter is an ActiveX control that applies gradient coloring, beginning with a start color and gradually changing to the end color. The default gradient filter uses a horizontal blue-to-black color scheme. You can apply the default filter inline (for example, on a div) with the fewest number of arguments. Listing 1 shows the default gradient coloring, and Figure 1 shows the results.

Listing 1: The Default Gradient Filter Style Applied Inline to a Div

<div style="filter:progid:DXImageTransform.Microsoft.Gradient(
   GradientType=1);
   width: 300px; height: 150px">
</div>

Figure 1: A small div with the default gradient shading filter applied.

To use some additional features of the gradient filter, you need to provide additional arguments. Other features include GradientType, which can be 0 or 1. The value 1 indicates the gradient shading will be horizontal and 0 represents vertical shading. The feature StartColorStr indicates the color to start the shade with and EndColorStr indicates the ending color. For example, if you wanted to use green and white to shade a div vertically, you could use the inline style filter shown in Listing 2 (see Figure 2 for the result).

Listing 2: A Vertical Green and White Gradient Color Scheme

<div style="filter: progid:DXImageTransform.Microsoft.Gradient(
   GradientType=0, StartColorStr='green', EndColorStr='white');
   width: 300px; height: 150px">
</div>

Figure 2: A Vertical Green and White Gradient Shade Filter

Additional Resources

If you want some help finding imaginative colors, check out this MSDN link.

Any Effect You Can Think Of

You'll find filters for shadows, control reveals, gradient shading, making images glow, and more. Name what you want to do and you can find a filter that will help you create the desired result.

Gradient filters have been around a little while, but many new and cool features are available for .NET programmers. One of my new favorites is Atlas: lightweight, asynchronous XmlHttpRequests from client to server without the usual ASP.NET page flicker and post back.

About the Author

Paul Kimmel is the VB Today columnist for www.codeguru.com and has written several books on object-oriented programming and .NET. Check out his new book UML DeMystified from McGraw-Hill/Osborne and his upcoming book C# Express for the Professional Programmer from Addison Wesley (Spring 2006). Paul is an architect for Tri-State Hospital Supply Corporation. You may contact him for technology questions at pkimmel@softconcepts.com.

If you are interested in joining or sponsoring a .NET Users Group, check out www.glugnet.org.

Copyright © 2006 by Paul T. Kimmel. All Rights Reserved.



Comments

  • If it excludes, I exclude it

    Posted by bpatin on 03/08/2006 02:35pm

    Techniques that only apply to IE are worthless to anyone who intends to code for any other than a highly restrictive audience. This article wasted my time. "IE Only" should have been part of the title, so I wouldn't have bothered to read it.

    Reply
  • for IE only

    Posted by hspc on 03/04/2006 03:37am

    Good Article. Note that these effects are DirectX effects used for IE only.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • Packaged application development teams frequently operate with limited testing environments due to time and labor constraints. By virtualizing the entire application stack, packaged application development teams can deliver business results faster, at higher quality, and with lower risk.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds