- Home
- Archives
- Icons
- About
- Contact
Weblog Entry
1
2
3
4
5
6
7
8
9
10
11
12
13
14
CSS Zen Garden
May 07, 2003With a few caveats and a bit of apprehension, I present to you my latest pet project: The CSS Zen Garden. (also available on it’s own domain)
Inspired in roughly equal parts by Chris Casciano’s Daily CSS Fun and rant (of which I strongly share the same opinion), the recent Hack Hotbot contest, and an independent idea I’ve had stuck in my head forever, I finally committed to creating this. I think it’s needed. Even if it’s not, I think it’ll be fun.
Now for the caveats: Macs are quirky little devils, aren’t they? I have it on good word that some of the designs work jes’ fine in Safari and IE for Mac, while others do not. Having no Mac testing machine at the present time presents a bit of a problem in squashing those bugs. One of them is still a bit weird in IE5/Win, but I’m fixing that soon. Basically, my caveats boil down to: my CSS is valid, the browsers are a bit grumpy. We’ll work out our differences.
The goal was to hit some important milestones: I wanted to create a page that allows for some wildly different CSS designs, while coding valid XHTML 1.1, valid CSS, and conforming to Section 508 and AAA accessibility guidelines. Time will tell how successful the former is, but the technical requirements were met.
Anyway, enjoy. I hope to address to quirky browser incompatibilities ASAP. Special thanks to Paul and Kris for the Mac screenshots.
Reader Comments
1
Bob says:
May 08, 01h
Very nice indeed. Thanks for the inspiration! I too see problems with ‘stormweather’ in Mozilla. Currently Moz 1.3b on win2k. Screenshot by mail if you want.
2
Jemaleddin Cole says:
May 08, 01h
stormweather has problems in my Win/Phoenix nightly build, but otherwise everything is beautiful. One other nit: whouldn’t the links to the different versions be better as a ul?
3
Sherif Tariq says:
May 08, 02h
Mmmm. I hate to admit it, but I love the bloodlust design. It’s the kind of design that can make graphics designers sit up and get excited about CSS. It kind of reminds me of the experimental designs from the Age of Tables & Fonts.
Stormweather is my next favorite. Altogether, lovely designs, all of them. Now, if you don’t mind, i’m going to go sit in the corner and weep silently at my humbled design skills :-)
4
Jemaleddin says:
May 08, 03h
But it works in K-Meleon, another gecko-browser, so who knows?
5
benry says:
May 08, 04h
Once again Dave, super nice job on the ZEN GARDEN project — very elegant. When I get a chance I’ll have to take some time and crank out my own CSS and zap it your way. Things look pretty good in Safari and IE5 Mac. If you need any screen shots or Mac checks just let me know.
6
benry says:
May 08, 04h
P.S. FYI Dave the link in the menu bar on Mezzoblue to the Zen Garden is going to the pocket site not the Zen Garden site.
7
Dave S. says:
May 08, 07h
Thanks all for the great comments! I’m very encouraged by the response I’ve been getting so far. I was a bit worried that I’d be eaten alive for some of the Mac quirks, and it seems that newer versions of Mozilla are having issues. Stormweather as a whole is quite the problem spot… I think I’d better look into that one.
And I think it’s okay to like ‘Blood Lust’, Sherif. ;) I’m rather fond of that one too, mainly because it’s completely different than what I’d normally do. I’m quite interested in seeing what kind of submissions I end up getting. I hope this project can substantially raise the bar for CSS design.
8
Dave S. says:
May 08, 07h
Thanks for the note, Jemaleddin. That one does seem to be the biggest problem spot, since neither IE/Mac or Safari like it right now. Pity, too, since I think it’s my favorite right now.
I checked it in Moz1 and Netsape 7 and both are cool, so I guess it’s a Phoenix quirk in this case… odd that a Mozilla derivative would disagree with the others.
9
Keith says:
May 08, 08h
Wow, nice work. There are a few small problems in Safari, but you know, it’s still gets the point across, and small glitches aside, they are still usable. I’ll check it on my PC at work to get the full effect.
10
haze says:
May 08, 10h
safari = beta
11
Chris says:
May 08, 10h
Nice work. A great example of the power of using CSS and how it can be manipulated gracefully.
12
bish says:
May 08, 10h
great job! nice and inspiring… i enjoyed your humble “black sheep” comment on web-graphics.com. nice to see a graphic designer that’s not an arrogant jerk.
[off to come up w/ my own … ]
13
Jonathan Porter says:
May 09, 02h
First off ALL the pages are extremely visually attractive. It’s almost impossible to believe that the little bit XHTML ended looking so nice. But what shocked me more was when the styles were turn off. The page rendered perfectly, everything was structured correctly and in its place.
While many site use CSS+XHTML most look like crap with the styles off or viewed in a browser like lynx. Content that is supposed to be at the end of page ends up somewhere in the middle and long lists of text are often lined at the bottom. I’m a big supporter of proper HTML first CSS second and the demonstration page demonstrates that beautifully. It doesn’t even make an attempt to cater to a particular medium making perfect sense on screen or in print (or in audio for that matter). Bottom line wonderful demonstration all around.
14
Kristopher Hooper says:
May 09, 08h
Good to see such a cool idea – and damn fine execution – is getting the response it deserves!
A little healthy competition and a truckload of zesty submissions could really change the tone of “The CSS Debate” when folks see what you can DO with CSS instead of repeatedly being told why they should do it.