Ask the CSS Guy

Props to the CSS Zen Ocean Diver Effect

Kai Laborenz's CSS Zen Ocean contains one of the most intriguing effects in all of the CSS Zen Garden. I was fortunate enough to view this entry in Firefox, as it doesn't show in up IE6 at all, and IE7 and Safari butchers it to the point where the magic is ruined - the secret to the trick revealed due to the browsers's minor differences from Firefox in displaying png files.

To see what I'm talking about, view the entry using Firefox, and watch the diver on the right as you scroll down the page. A light gradually appears as he reaches the depths of the ocean.

Had the background of the page be a solid color rather than a gradient, perhaps the effect wouldn't be lost on non-firefox browsers that supported png. However, I can't figure out how Kai got it to look right even in Firefox - as my attempts to create a png that matches a browser's background color was hard enough (perhaps background images instead of colors should be used?).

Let's see how the effect works. There are three images being used - the diver, the light, and the gradient strip of the ocean. Kai used png's for all three images (but I think only the background needed to be a png.)

Each image is placed in a div, and those divs are overlapped, using the z-index property to control how they are layered. Here is the order of the layers of the images on the screen.

Note: Where you see green below is actually transparent. I added the green because the diver and light (particularly the light) doesn't show up very well when surrouned by 'nothing'.

Kai's CSS is commented very well to communicate how the divs that contain these images are arranged. I've modified the order, changed the names of the images, and added additional comments to help share what's going on:

/* this one is the diver without his light */
#divDiver {
	position: fixed; 
	/* note that position:fixed; keeps the
	image from scrolling offscreen.
	The image of the light is the same dimensions as the diver, 
	and you'll notice all the styles for that div are identical
	to this one, with the exception of the z-index, which places
	the 'light.png' image behind the 'diver.png' image*/
	top: 230px;
	right: 8%;
	width: 100px;
	height: 175px;
	background: url(diver.png) no-repeat top;
	z-index:10; 
}
/* dont dive without a good light */
/* (dont forget to charge the batteries as well) */
#divLight {
	position: fixed;
	top: 230px;
	right: 8%;
	width: 100px;
	height: 175px;
	background: url(light.png) no-repeat top;
	z-index:8;
}
/* a png gradient is placed between the diver and his light */
/* works in gecko an opera 7 */
#divGradient {
	position: absolute;
	top: 210px;
	right: 8%;
	width: 100px;
	height:1000px;
	background: url(gradient.png) repeat-x top;
	z-index:9;
	}

Here are the images Kai used (all pngs):

• light.png
• diver.png
• gradient.png

I'd love to see other effects people have come up with using this technique. This entry in the zen garden is amazingly elegant and well-done - I think it'd be hard to match.

# November 2, 2006 10:56 PM