complexspiral distorted

The page you are viewing right now exists to show off what can be accomplished with pure CSS1, and that's all. This variant on complexspiral doesn't even use any CSS2 to accomplish its magic. Remember: as you look this demo over, there is no Javascript here, nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other language. It's all done using straight W3C-recommended markup and styling, all validated, plus a total of four (4) images.

Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely support CSS1 will get this right. Despite some claims to the contrary, IE6/Win's rendering of this page is not correct, as it (as well as some other browsers) doesn't correctly support background-attachment: fixed for any element other than the body. That makes it impossible to pull off the intended effect. Other browsers may or may not get the effect right.

Hands-on: Things to Examine

Before you start, make sure you're viewing this page in one of the browsers mentioned above. Otherwise the descriptions to follow won't match what you see.

The first, easiest thing to do is scroll the page vertically. Make sure you scroll all the way to the very end of the page and back. Notice how the various areas with colored backgrounds also appear to distort the background image as if through mottled glass. Try changing the text size and notice how the compositing effect remains consistent. Then make your browser window really narrow and scroll horizontally. Again, everything should remain seamless and consistent.

The demonstrated effect, that of having various elements backed with translucent rippled glass of varying hues, is only possible using fixed-attachment backgrounds in CSS. (Okay, maybe it could be done in Flash; I don't know.) I don't think it's even possible with IE's proprietary filters, but even if this effect is possible with filters, I could easily enough devise one that isn't.

I missed the original complexspiral demo-- how does this work?!?

Glad you asked. The effect demonstrated here is achieved by using fixed background images, nothing more. For example, the main-content area (the blue part here) uses the following styles for the default spiral-shell background: 

div#content {background: white url(glassy-ripple.jpg) 0 0 no-repeat fixed;}

The above is equivalent to these styles: 

div#content { 
   background-color: white;
   background-image: url(glassy-ripple.jpg);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }

The effect of these longer rules is exactly the same; they're just split out into individual background properties for more detailed consideration by you, gentle reader.

First, check out the rippled-shell image found here: url(glassy-ripple.jpg). Then come back to this page and I'll continue with the explanation. All done? Great.

According to CSS, any background image that is "fixed" using background-attachment: fixed; is fixed with respect to the viewport-- not the element with which the image is associated. So I set the rippled-shell background image to be aligned with the top left corner of the browser window (the viewport) with the values given for background-position. However, the image will only be visible wherever is intersects with the element to which it's been assigned. Therefore, even though the top left corner of the rippled-shell image is aligned with the top left corner of the viewport, we can only see it wherever it intersects with a div that has an id with a value of content (which, again, happens to be the one containing this text).

So I set a fixed background for the BODY, the content DIV, and H1 and H2 elements scattered through the document. In any given case of an element's display, we see whatever part of the associated background image intersects with the element. The rest of the background image remains hidden.

And that's how it works.

I'm not seeing the compositing!

Then I'm willing to bet that you're using Internet Explorer for Windows (any version), or possibly Opera (version 6 or earlier). Neither of these browsers fully support background-attachment: fixed for elements other than body. In the case of both, images are fixed with respect to the elements that contain them, not the browser window, which is not what CSS1 defines background-attachment: fixed to mean, although browsers are allowed to ignore fixed if they stick to CSS1 (CSS2 requires its implementation for conformance). And yes, this page uses a strict DOCTYPE, so IE6 is in "strict mode." I guess when Microsoft claims 100% CSS1 compliance, they're referring to the CSS1 core (a reduced subset of CSS1) instead of the entirety of the CSS1 specification. It tends to make me wonder how limited or flawed their "full support" is for other key open specifications, like HTML and DOM.

Image credits

Jump to