Letterman Stationery Drawing Colored Lines and Boxes

Drawing Colored Lines and Boxes

During the coding of ColorOverlayEditor, I stumbled onto a technique to draw colored lines and boxes of any width or height without having to open up my image editor. You can use this technique too in your e-mails and posts. Follow along and I'll show you how.

Here is your basic thin line, color:red.

Here it is again, only blue this time, and thicker.

Here's a rectangular dark-green box.

Now, instead, here's a black vertical line.

All of these graphics were made with the HTML <DIV> element. They are easy to make, and simple to use.

Here's the <DIV> HTML element that generates the thin red line above:

Notice a few important things about it. Its height is 1 pixel high, and its width is 400 pixels wide, determined by the height: and width: keywords. Its color is set to red by the background-color:#ff0000 attribute. Between the starting and ending <DIV> tags is the HTML character entity,  . This is called a "non-breaking space" character, and it is required for this technique to work. The <DIV> element must have content (the non-breaking space) between the tags if we are drawing a line or box. The non-breaking space is invisible, just like the space on the spacebar.

The other two parameters, font-size:1px and line-height:1px set the minimum line height we can draw (1 pixel). These values need not ever be changed. We control our actual width and height with the width: and height: keyword values. Now let's draw the thicker blue line. Here is the <DIV> HTML element that generates it:

Notice we have made but two changes: its height and background-color attribute. We've set its height to 10 pixels high (leaving the width at 400 pixels wide). Its color, blue, is again set by the background-color:#0000ff attribute. Once you have the basic form of the <DIV> down, you can draw a colored line or box of any size by specifying just these three parameters. Let's generate the box. Here is its <DIV> element:

Its width is 100 pixels and its height is 40 pixels. We've set its background-color to dark green, #009900. And last, here is the vertical line. Its <DIV> element follows:

Its width is 2 pixels and its height is 40 pixels. We've set its background-color to black, #000000. The lines and boxes below have been made with <DIV> elements which are absolutely-positioned. In a subsequent tutorial, I'll show you how to position elements in this way.

You will note that when printing pages containing lines and boxes drawn this way, the pseudo graphics will not print. This is also the case for some other HTML elements, particularly absolutely-positioned ones. They are, however, rendered on-screen in your e-mail or post, which is what counts.

So, when you want to make a colored line or box in your e-mails or posts, use this simple technique. Avoid starting up that photo editor.