Single Pixel GIF Trick: Rules and Blocks
Single pixel GIFs can create rules and blocks.
One of the nice things about HTML is that you can reach the same end through several routes. Look at this series of green boxes:
- Box #1 is a 36 x 36 pixel GIF.
- Box #2 is a 1 x 1 pixel GIF sized to 36 x 36.
- Box #3 is a table cell set to be 36 x 36, with a background color of #009900, the same green in which the GIFs were created.
The one-pixel GIF trick lets you create blocks, boxes, and rules from a tiny 1 pixel file. Some people keep a library of commonly used colors and call on the one-pixel gif anytime they want to create a block of color effect, rather than creating a new, larger graphic from scratch.
Let's look at some examples:
|To create a 500 pixel green horizontal rule take a green single pixel GIF and simply set height to 1 pixel and the width to 500 pixels.
||To create a 100 by 10 pixel red vertical rule take a red single pixel GIF and simply set height to 100 pixel and the width to 10 pixels.
To create two 100x 50 blocks, just enter the image tags and set widths to 100 and heights to 50.
Single Pixel GIF Trick: Spacers
Single pixel GIFs can let you position objects and add indents.
Before CSS, single pixel transparent GIFs were often the best way to add margins and borders and position objects. With the growing acceptance of CSS, it is best to try CSS properties such as margin and text-indent before resorting to one pixel GIF spacer tricks.
Using a transparent GIF, you can position graphics precisely. To have two graphics exactly 50 pixels apart from one another, you would place the transparent single pixel GIF between then and simply set height to 1 pixel and the width to 50 pixels. Click on the example to see the code that created it.
This can also be done by setting the hspace to 25 instead of changing the width setting.
You can also use this technique for text positioning. To add a 8 pixel tab indent to a paragraph, you could insert a transparent GIF sized to 8 pixels wide and 1 pixel high before the text. Click on the example to see the code that created this effect.
Transparent one-pixel GIFs can be stretched and used as a quick spacer solution.
One-pixels GIFS in a variety of colors, combined with height and width attributes in the image tag, are a quick "cheat" for making boxes and rules of solid color.