Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


Optimizing Design: One-pixel GIFs : Page 2

Single pixel GIFs can be a useful workaround design element.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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:

green box one pixel green gif  

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

one pixel green gif

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.

To add a 12 pixel tab indent to a paragraph, you could insert a transparent GIF sized to 12 pixels wide and 1 pixels high before the text.
This gives you the effect of changing the margin, which you can also now do with the CSS text-indent property.

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date