Bonsai Sky: Working around browser limitations with creative imagery and code

Mike Davidson, Designer

www.csszengarden.com/069

PUSHING THE ENLIGHTENMENT THEME to new heights, Mike Davidson created a visual Zen garden in the sky to illustrate his Bonsai Sky. Beginning with a photo of rocky, tree-lined cliff faces, he first had to figure out how to balance the text with a dominant photo.

Placing the cliff imagery in the top-right corner and fading it to white allowed Davidson to position the text just to the left, avoiding any potential contrast issues of text overlaying a busy photograph. The generously spaced black type sits in the empty white space to the left of the cliffs, which leads the viewer to scroll down for a surprise: runes of the major browser logos carved into the cliff face, and a hiker peering into the abyss. The hiker is Davidson. Having successfully scaled the CSS learning curve, he feels there's no going back.

Versioning

Some of the interesting imagery within Bonsai Sky is viewable only in certain browsers; because of Davidson's use of specialized CSS properties it simply wasn't possible to present an identical version of the design to everyone. Instead of giving up on the visual effects he wanted to add, Davidson effectively fooled the browsers that would apply them improperly by turning to some selective CSS.

Black Border Positioning

Bonsai Sky is framed with a thick black border that makes use of fixed positioning:

 #extraDiv2 {   background-image: url(edge_bottom_black.gif);   background-repeat: repeat-x;   position: fixed;                                  bottom: 0;   left: 100%;   width: 100%;   height: 20px;   margin-left: -100%; } 

The fixed positioning attribute allows elements to be placed precisely within a layout and remain in that spot even when the user scrolls down the page. The fixed elements appear to float above the rest of the page, just as the borders seem to do in this design (FIGURES 1-3).

Figure 1-3. The frame stays put as Bonsai Sky scrolls.

However, fixed positioning support isn't reliable, and some browsers (Internet Explorer for Windows being a notable example) will scroll fixed elements along with the rest of the page. In some designs this can be considered an acceptable degradation: If the browser allows the element to remain fixed, great; if it doesn't and instead scrolls the element along with the rest of the page, that's OK, too.

Black Border Workaround

However, Bonsai Sky's borders would obscure the content if this were allowed, as shown in FIGURES 4-6, so a workaround was vital. Various filters exist to hide CSS from browsers, but instead of turning off the borders completely, Davidson found a way to hide them just offscreen by exploiting an unrelated deficiency of certain browsers.

Figure 4-6. The frame overlaps if allowed to scroll.

Each of the borders running horizontallyboth top and bottomis placed using fixed positioning with a left offset of 100%. Their starting positions therefore begin just past the far-right edge of the browser window, completely offscreen. To pull them back onscreen, Davidson applied to each a negative margin-left value of -100%.

 #extraDiv2 {         background-image: url(edge_bottom_black.gif);         background-repeat: repeat-x;         position: fixed;         bottom: 0;         left: 100%;         width: 100%;         height: 20px;         margin-left: -100%;                        } 

Since most advanced browsers support negative margins the borders will be properly rendered in the spot Davidson intended. The browsers that don't support negative margins will not move the borders back onscreen, leaving them nicely hidden. Luckily for Bonsai Sky, these same browsers lack support for fixed positioning.

Buddha

After working out the placement of the borders, Davidson threw in an extra visual accent to complete the theme. A small gold statue of Buddha sits on a floating stone ledge, just touching the right edge of the browser window. The statue image was placed using the same fixed positioning technique used for the border.

Since that meant that Internet Explorer for Windows wouldn't render it anyway, Davidson decided to take advantage of the alpha transparency possible with the PNG file format, which it doesn't support either.

A faint, transparent shadow was placed behind the ledge within the PNG file (FIGURE 7). As the user scrolls down Bonsai Sky, the shadow prevents the rocks of the ledge from disappearing into the rocks in the background, and maintains a sense of layered three-dimensionality.

Figure 7. A faint shadow appears behind the ledge and the statue of Buddha, thanks to PNG transparency.

It's a simple, subtle touch that would be completely lost within the limited transparency of a GIF file, and therefore impossible in browsers that don't apply PNG transparency properly.

While the floating ledge and statue graphic adds much to Bonsai Sky visually, Davidson felt strongly enough about his enlightenment theme that he decided that only browsers truly "enlightened" with the fullest range of CSS support would be able to display it. Applying the same negative margin trick he used for the page borders, the floating ledge simply doesn't show up in Internet Explorer for Windows.

However, realizing that this meant the many viewers running that browser wouldn't see the effect, he made sure the rest of the design still worked reasonably well even if the ledge wasn't visible. The potential degradation was acceptable in this case, though the final result is undeniably nicer in a browser that supports fixed positioning and PNG transparency.

Sidebar Transparency

After setting the text and positioning the cliff photo, Davidson faced a dilemma: The link lists"select a design," "archives," and "resources"required placement. But after spending time crafting the cliff imagery, he was hesitant to cover it up.

A slightly transparent overlay seemed like a good solution, but PNG transparency obviously wasn't going to suit the bill; this time it was important for the imagery to be visible in Internet Explorer for Windows. So instead he turned to an age-old Web designer's trick of fooling the eye into seeing a small, transparent GIF as a half-opaque overlay.

A checkerboard pattern of alternating black and transparent pixels appears to be a 50% black transparent area, when repeated across a larger area (FIGURE 8). This is very similar to how inkjet printers simulate gray by using a screen of minuscule black dots to fool the eye into seeing something halfway between white and black.

Figure 8. Enlarged transparent checkerboard GIF pattern that simulates a 50%-black transparency.

Because pixels are quite a bit larger than the dots used by even the lowest-resolution inkjet printer, a visible checkered pattern is unavoidable and the illusion isn't perfect. But it's good enough to work as intended, and the pattern can be considered part of the design (FIGURE 9). In fact, Davidson accented the headers within the text area with dotted underlines to further tie the pattern into the rest, a subtly clever move to keep the overall tone at least consistent, if not exactly as intended.

Figure 9. Checkered GIF overlay, 100%.

Special Treats

The fixed positioning tricks Davidson used almost ensure that the viewer spends extra time scrolling the page to see them in action. Once a viewer notices the statue of Buddha floating above the background cliff, his or her impulse is to follow it up and down the page.

As a reward for making it all the way down to the bottom, the viewer gets a nice bonus: runes of the major browsers that appear to be carved into the face of the cliff, topped with some CSS code (FIGURE 10).

Figure 10. Browser icons as runes carved into the side of the cliff.

This extra imagery is a nice touch, since many designers will focus on the top of a piece, which is the most obvious place for intricate detail work and the most likely to be seen. Breaking the mold by putting important thematic elements in a nonstandard spot, and then providing incentive for the viewer to find them, is a creative way of making design work stand out.

Judgment Calls

While there is no use in applying fancy CSS effects if the majority of your users won't be able to view them, the ability to selectively degrade a design and provide browsers with graceful alternatives is an important method of experimentation.

Pushing the limits of implementing CSS effects requires that designers take some chances, but fortunately it's entirely possible to play it safe at the same time so that viewers are not left disappointed. Discretion and careful attention to browser support ensure the richest possible experience for a wide variety of users, without leaving anyone too far behind.