A DEMONSTRATION OF WHAT CAN BE ACCOMPLISHED THROUGH A TASTEFUL BLEND OF CSS & TABLE-BASED DESIGN. SELECT ANY STYLE SHEET FROM THE LIST TO LOAD IT INTO THIS PAGE.

Select a Design:

Sample #1 by Dave
Sample #1 by Dave
Sample #1 by Dave
Sample #1 by Dave
Sample #1 by Dave
Sample #1 by Dave
Sample #1 by Dave
Sample #1 by Dave

Archives:

next design» 
« previous design
View All Designs*

Littering a dark and dreary road lay the past relics of static pages, unscalable images, and boxed-in design.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the CSS Zen Garden and the Mezzo Blue creators.

The Hybrid Garden invites you to relax and meditate on the important lessons of the masters. We begin to see with clarity. Use the (yet to be) time-honored techniques of CSS in combination with the traditional reliability of standard HTML tags in a new and invigorating fashion. Become one with the web.

There was clearly a need for CSS to be taken seriously by web artists. The Zen Garden aimed to excite, inspire, and motivate. The Hybrid Garden aims to demonstrate how quickly a list of images and a solid style sheet can work together to change the entire feeling of a template-based webpage. View some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file and the folder of images.

Yes, really. CSS allows complete and total control over the style of a hypertext document. The tasteful use of tables allows for a scalability that CSS (as of yet) cannot match. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of the Hybrid Garden. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This is changing.

We modified this page, based on the open invitation from the CSS Zen Garden, but the strict guidelines of a CSS-only design proved too static for the fluidity of modern web architecture. Please see CSS Zen Garden for advanced tutorials and tips on working with CSS.

Our page takes the concept of a more global web design using CSS and incorporates it with a solid understanding of a resizable World Wide Web. The choices of ISPs, computers, monitors and browsers makes it impossible to determine a defined set of rules that applies to all. But we are equal opportunity designers, and here one size fits all.

Download the sample html file and css file to work on a copy locally. You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before. Create a set of images to match the ones provided. Easy as that. Think of it as a big, one-size-fits-all template.

Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for CSS-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. Even we can only straddle the line between CSS and HTML.

We would like to see as much CSS1 as possible. The Hybrid Garden is about functional, practical HTML and not the latest, CSS only design crowd, constantly debugging and pulling out their hair. The only real requirement we have is that your CSS validates.

We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.

This is a learning exercise as well as a demonstration. You retain full copyright on your graphics, but we ask you release your CSS under a Creative Commons license identical to the one on Zen garden so that others may learn from your work.

Bandwidth graciously donated by blueMAVEN web

Resources:

View This Design’s CSS

CSS Resources

FAQ 

Submit a Design

Translations