CSS Zen Garden - CSS-Based Design

As a developer my creativity extends to creating a button for a website and can only dream of producing some of the designs our talented designers come up with. However bookmarked amongst my favourites is a gem of a site, CSS Zen Garden.

Zen What?

CSS Zen Garden is a CSS showcase demonstrating what can be achieved with CSS-based web design. For those who aren’t familiar with CSS, it is responsible for styling the websites we produce. The site is a simple idea, armed with a base CSS page and a sample HTML file, designers submit their interpretations and the best are shown on the site.

Below I have listed three of the designs submitted. The designs I have chosen are not necessarily the best but they undertake the challenge in three different ways…
 

CSS Co., LTD

This design is relatively unique to CSS Zen Garden, in that it is not only eye-catching and visually effective, it is also functional. This site could be used for a client, its layout is clean and laid out with the user in mind but has nice design touches such as the icons running through out the copy and also incorporating within the logo.

Retro Theatre

I have chosen this design because it shows what can be achieved with CSS and original thought. Sure it’s not necessarily visually pleasing nor is it in any way usable as a website. However it is attention grabbing and the overall concept shows thinking outside the box.

Pinups

My third and final design is one that goes for design impact. It brings together a number of images and techniques to clearly stamp its identity. Despite its visual approach it is still reasonably usable, it is well organised and draws awareness to the titles making it functional for visitors.

And the point is?

CSS Zen garden is a great example of how the styling of a site should be treated differently to the content. If used properly CSS is a powerful tool by simply altering the CSS you can say restyle Google’s website to look like Yahoo without touching any of the content or structure of the site. 9xb values forward thinking and by adopting this technology we are able to create clean lightweight sites which are standards compliant.