Inside Technique : Cool Rules
By Scott Isaacs

HTML supports an <HR> element for creating an horizontal rule. While the <HR> element is useful for breaking up the flow of content in your document, you have very limited control over its appearance. Instead, many sites are replacing the standard horizontal rules with images.

In this article, we demonstrate a technique for creating appealing horizontal and vertical rules that can blend between two colors without having to resort to an image. This technique can be used both in client-side and server-side scripts using the same code. You can set the start and end color, the number of steps to take to blend the colors, the width and height, the direction, and whether the rule should be aligned left or right (useful for vertical rules):

To create the rule, we defined a function that generates a table with the dimensions you specify. The colors are blended by setting the background colors of each cell appropriately. The number of cells is determined by the number of steps you specify.

We originally designed this technique to run on the client. Unfortunately, even though this technique only uses standard JavaScript and the object model's document.write() method, the code failed to run reliably on Netscape Navigator. However, since most of the generation is handled through JavaScript we were able to copy and paste this function directly into an ASP script and run it on the server. When run on the server, almost all of the client issues go away.

Next we continue with an explanation on how to create horizontal rules using the createHR() function.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.