The CSS Zen Garden is a demonstration of what can be accomplished through CSS-based design. On the website, you can select any style sheet from the list to load it into the page. Our final project for my Advanced CSS class was to create a stylesheet for the CSS Zen Garden, with a responsive layout, themed design, transitions, and animations. We were challenged to create a CSS stylesheet without the use of our own classes or ids, instead using selectors creatively to accomplish our goal. Since we couldn’t edit any of the HTML, this proved to be a significant challenge!
I wanted to create a themed stylesheet inspired by some of my other projects, such as the Cosmic Pinball Gig Poster. We imported background images using CSS, meaning that as long as we hosted the images on another site, we could include them. I created the images in the background as well as the actual background image in Adobe Illustrator, and then included them as background images. The sidebar and header use animations and transitions to add visual interest, and the entire layout is responsive and looks great in any window or screen size.View the Full Codepen Here