Zen Garden - Website Review

http://www.csszengarden.com/?cssfile=089/089.css

css Zen Garden is a website where designers can create their own CSS designs for the same html website. The website itself explains this and has links to the other CSS designs.

I looked at this one particular design. I liked it because of its colour scheme and layout. I used similar colours to the dark blues and the contrasting orange. I wanted a dark neutral background which would not distract from the particles being generated.
The page is divided into its sections with thin lighter blue borders and soft shadows.

Base Particle System

The particle system used is based on the following tutorial:

A simple particle system using Actionscript 3

From this I added 2 direction gravity and emit direction and the interactivity for the friction, emit direction and gravity parameters.

Box Drag Test

Initial test for draggable box. I was originally going to have patterns following the box similar to Cursorized.

Cursorized! 2 - Flash 'Gadget'

Cursorized! 2 is a flash toy which displays many different and flashy cursor following effects and particle patterns. It contains 100 different colourful and interesting effects and while they may be very impractical, even for desktop cursors they are fun to play around with and look through.

This gave me the initial idea for a draggable box particle emitter.

http://www.newgrounds.com/portal/view/291631

Final Eye

Final Anatomy of the Eye

A test for smooth animation controlled by a slider. The eye animations could appear to be reacting to the user input rather than being controlled directly by them.



Smooth slider applied to eye simulations.

Layout Design

Layout development to final design(top).