Using Gradient Shading in Web Pages Portland OR

provided by: 
Originally published at Internet.com

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

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

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 poost 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.