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.
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.
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 example will be forthcoming when I have time. Stay tuned!
