Daybreak
Submission to the CSS Zen Garden project.
Concept
After reviewing the CSS Zen Garden's official designs, partner Tony Dewan and I quickly discovered a trend in the submissions: They were chosen due to design aesthetics or technical complexity. For our experiment, we didn't want to force ourselves into either category, so we spent considerable time on both strategies.
1 As the page scrolls toward the bottom of the screen, the sun dawns revealing additional navigation.
Early in the conceptual stage, we wanted to tell a story as the user interacts with the design while scrolling the page. Since it is a relatable experience, the transition from night to day would provide a compelling narrative and strong visual elements.1 The moon and sun respectively establish the night and day; and a sky assists the transition between the two. In order to ground the world against the scrolling moon, sun and sky, a blooming tree serves as a natural, strong and enduring visual anchor.
Technical roadblocks
To technically achieve a smooth transition from the spectrum of cool to warm colors while overlaying a visually complex tree element, the tree would need to be created as a 24-bit PNG image. (24-bit includes an alpha channel, rather than merely a "transparent" pixel, like 8-bit PNG and GIF.) Since this image type is not compatible with all older browsers and JavaScript is not permitted for this submission, transparent GIF versions were provided for graceful degradation.2
2 Graphics and CSS gracefully degrade for Internet Explorer 6.
As another roadblock, Internet Explorer 6 cannot fix elements to the bottom of the viewport via CSS. Alternatively, we produced a different but aesthetically similar visual anchor and affixed it to the top of the page. This new image places the user underneath the tree, seeming as if selected branches hang low in the top of the user's peripheral vision.