CSS Zen Garden

Technologies Used

About this project

CSS Zen Garden is a site that has been around for over a decade, which web designers and developers use to “show the power of CSS”. For this project, we were not allowed to touch the HTML. Instead, I used pseudo classes to create extra divs and multiple background images to layer and create more depth. This was my first project using Bourbon, CSS animation, and SVGs. I found Bourbon to be very helpful with efficiency when using animations and linear gradients. From sketching, to wireframes, to codepens, this process showed me that there are many, many ways to use CSS to create beautiful websites.

I used CSS animation to imply that lights were turning on and off in the different windows, at different times. I also created svgs and used them as background images to create more depth.

For the body, I used multiple background images, creating a stylized city scape in Illustrator, and a linear gradient to give it a "dusk" feel. The stars are extra divs given in the HTML and pseudo classes to create befores and afters, with a subtle animation to make them twinkle.