(CSS) Example:
Overlapping Text and Graphic.

CIS/SMOG/NIS  jim.cerny@unh.edu  12-JAN-1999

Results.

(Guy Noir)

Guy Noir, private eye.

Guy Noir, private eye.

Guy Noir, private eye.

Guy Noir, private eye.

Notes.

This example combines a graphic with text to create an introductory or "splash" graphic. All the elements are specified in an internal style definition in the HEAD section of the document, with each element as a declared class that is then invoked via a CLASS attribute on either a DIV or SPAN "container" tag.

You can tweak the font family, font weight, text color, font style, font size, text layering, and text positioning until you get the effect you want.

Apologies to Garrison Keillor, but this is how I imagine his radio private eye, Guy Noir. The graphic is from an unrecorded source on the Internet, edited to make it more gritty. The overlapping idea was prompted by Lynda Weinman's "ducks in a row" example in the January, 1999, issue of Web Techniques.


Return to CSS seminar home page.