Special Effects: Overlays

0

(There are no images in what you see just above. See the style sheet gallery on the Microsoft web site for many more examples.)

Unfortunately, this is also where style sheets get complicated, partly because CSS is still a young technology and implementation of CSS support is nowhere complete or standardized. IE 3.0 handled overlays strictly through margin (box) properties. Subsequently, Microsoft and Netscape came to an agreement that overlays should be handled through positioning; they have not (yet), however, come to agreement on how positioning should be defined. (Positioning in the three b rowers will be discussed in detail in the pages that follow.) This means that if you want to use positioning, you will need to write separate style sheets for each browser, and use a JavaScript to force the page to use the right one according to which browser the user has.

For overlays, you will need to use scripting anyway, because browsers that don't support CSS will simply render both the blocks of text in succession, which is especially problematic for shadowed text, since the result will be simple repetition of the paragraph. The solution is to use a JavaScript to write the overlayed text only if the browser supports CSS, and to make sure that the page will still be intelligible, if not all that it can be, without the overlay. We'll look at a script that does this a little later.

Some additional issues for effects that involve overlaying one text block on another:

• Note that the overlay effect depends on using negative margin settings for second (top-most) layer. In principle, you could work from the margins and point sizes to calculate the values mathematically, but in practice I find it quicker to do it by trial and error.
• Overlay effects can be easily wrecked by changes in the resolution for the user's display, which will cause lines to break differently. If you are going to use overlays, I recommend one of the following safeguards against this:

  make sure you work with text blocks short enough that they shouldn't break at any resolution or reasonable window size

  put the overlay element into a table with a fixed width, to prevent line-breaking; I generally advise against using fixed-width tables, though, unless you limit the width to about 470 pixels, some users are likely to have to scroll horizontally to see the whole width of the page, which is undesirable. And if you do use such a narrow width, users with high-resolution displays will be looking at a lot of dead space on the page.

• Inheritance can cause problems with overlays. For instance, it would seem logical to use a basic element and a class of the same element (or two classes of the same element) to define the two layers. This will not work if the element has a defined background, however, because a class specification can override but not undo a background specification in the primary element specification. Therefore, the background of the top-most layer will conceal the lower layer.