Painting pictures with CSS


The growing acceptance of CSS and increased browser support for it allows authors many possibilities to suggest formatting of their documents, without the need to resort to "hacks" such as using tables to position and format various elements and their backgrounds. Unfortunately, there is the temptation to misuse CSS by applying formatting solely to semantically empty elements (e.g., <div> and <span>) and forsaking all normal HTML structure such as the use of headings and paragraphs.

In an admitted fit of whimsy, I decided to push this "structure-free" concept to its (il)logical extreme by constructing pages that are devoid of not only structure, but also content, but yet use CSS to apply style to structure-free and content-free elements. It had occured to me that by applying styling to empty elements, one could "paint" pictures without the normal use of <img> elements.

As the pictures in these example make heavy use CSS positioning, a CSS-capable browser is required. Browsers that are capable of displaying these images include Internet Explorer 5.0 and up on a PC or Macintosh, Opera 5 and up, Netscape 6 and up, or Mozilla. Netscape 4.x unfortunately is unable to display these images.

Example 1

US Flag The flag of the United States of America: This is not strictly a "pure CSS" image because I used the asterisk character (*) for the stars. Consequently, if you are using a browser that allows resizing of text that is sized in pixels, you should set the text size to "normal" so that the stars fit on the field. The rest of the image is drawn by defining <div>s that are assigned the appropriate colors and dimensions and by absolute positioning.

Example 2: A pointillist approach

Lower Falls The Lower Falls of the Genesee River in Letchworth State Park in New York. This image is based on a photo from my photo gallery of Letchworth State Park. This image was made by scaling an image to 100 × 75 px and exporting it to a postscript file. The color values for each pixel were extracted from the file and converted to a series of floating <div>s of 5 px each with the color assigned as an inline style. Each "line" in the image is composed of 100 such <div>s that are wrapped in another absolutely positioned <div>. A note of caution: the resulting file is over 300 KB, and may also take a short time to be rendered on your browser after it is received, so please be patient (Mozilla seems to be particularly slow in rendering this document, whereas Opera seems to live up to its claim to be the "fastest browser on earth").

More examples

More example will be forthcoming when I have time. Stay tuned!

Home  |  Web Authoring  |  Contact Me