Weeds in the Zen Garden

yeah...they seem to really be retaining that css 'look',which I hate to say but that mostly has the reputation as boring.

I really find it strange though. I used to think that you were limited to these designs by the limitations of css but have very recently tackled some very complex layouts, still easily achievable by css only.

Perhaps the novelty has worn off for the real innovators? Maybe these new designs are just being implemented professionally now, rather than showcased and touted as 'beyond the norm'.

Isn't the point of the Zen Garden that you can take a skeleton of HTML and dress it any way you want using CSS? That's the way I see it and that's what I see from people's submissions. I think it's more about pushing the boundaries of, like you say, your graphical vision rather than necessarily coding abilities. You don't see layouts of such striking graphic qualities in many other places so I think the Zen Garden definitely has a place and I know I constantly check in out to get design inspiration.

I suppose you have a point there, that it still shows what a css-driven site can visually achieve. However, I still think Shea should rename the site, "Zen of background-image Garden."

- Antibland

has anyone seen the book by the way?

always meant to get it, but then aaaaaahhhhhh can look at the site.

In my view, ZenGarden was a great motivator to get into CSS, it removed the impression many people had that CSS sites were boring and, for that, CSS-ers owe ZG a debt of gratitude.

The quality of the submissions accepted for display may have fallen off, perhaps in line with the number of submissions and the site administrators have less to choose from.

The impression I get of the site now is that it is tired and I look forward to seeing a rejuvenated ZG with new markup.

The book is actually quite excellent and worth every penny. I'm probably hewing the line of contradiction (site->bash, book->love) but it's very well written and organized. Some of the garden's best, most innovative designs are completely broken down and explained. You really get to peer inside the heads of some of the designers, which makes the designs Shea and Holzschlag cover quite unforgettable. Also covered are some of the most recent techniques in the CSS world along with the anatomy of the Zen Garden site. I enjoyed the book much more than the actual site. Go figure.

- Antibland

As usual, well put Lorraine. I think the problem is that imagination moves faster than innovation (sounds like a bad Hewlett Packard commercial or something). As soon as designers pierce the skin of a new barrier, viewers are already thinking/hoping for something better. Although I'm not retracting my remarks about the current state of ZG, I must agree that it has single-handedly furthered the importance of CSS in the industry. I really need to sever my frontal lobe. I would be much more accepting of things.

- Antibland

http://www.csszengarden.com/?cssfile=/174/174.css&page=0

Um, great

However, this one's quite good:

http://www.csszengarden.com/?cssfile=http://www.designers-eye.com/susan/zen/sample.css

It has always been my concern With this phrase:
"There is clearly a need for CSS to be taken seriously by graphic artists"

Why? graphic artists are not coders, web developers, web designers they are people with a specific discipline.

I too was originally enamoured with csszengarden until I began to see the same graphic led design time after time yes they look great but thats it; this is not a great example of the art of web design this is a template providing graphic artists with the framework to hold some fancy images - and many of them are wonderful to look at -
Why did graphic artists ever need to be shown that css was capable of producing interesting sites the clue was always in the scope and range of it's properties and attributes.

I despair at some of the designs now they leave a lot to be desired, few seem to understand or actually make use of the CSS file, to manipulate it to any degree and I get very bored now waiting for obscenely large graphics- that should have been optimised- to download.

Hide images and you will also see how many designs just fall apart due to not following correct background/foreground colors, specifying a background color to the text so that you can actually see it if images are broken.

I really hesitate to believe that csszengarden has really done that much to further the cause of CSS other than to further the impression that a web page just consists of a fancy photoshop image and that the code is secondary.

Hugo.

Hugo, if you had posted this a few ticks ago, I would have been all over you like killer bees on Winnie the Pooh, filling your wrinkled hands with high fives and slapping your back like you scored the winning goal in the cup (forgive me, I'm American and trying to keep up with you UKers). However, the fine members of this forum have reminded me of the garden's finer points of value. I believe that some of the designs--many of them earlier in the garden's existence--made creative usage out of that frozen markup available. However, as time progressed, and there were less and less nuggets out there to unearth, the zen garden started to get ugly, becoming nothing more than a graphic designer slugfest. So, Hugo, I partially agree with you. Earlier on, I'll admit that the Zen Garden helped bring CSS into legitimacy. Now it's just eye-candy that has nothing to do with CSS and everything to do with PhotoShop.

So, at this point in time, here are the necessary steps to take to produce a zen-worthy design:

1) Think of a kinda quirky theme that hasn't been tried yet. Having trouble with this? Just look around you! I'll call my next one, "Bathroom Cabinet."

2) Create a stunning graphic that brings this theme to life and then--oh, what's that? You're not a gifted graphic designer? Oh, then skip ahead to step five.

3) Slap this image in the markup as a background image.

4) Wait for oooos and aaaaahhhs.

5) You're done! Go eat a moon pie and celebrate!

- Antibland

I got a nice idea for a theme:

csscreator

Should be an easy one, not reliant on images, and very apt

csscreator

Should be an easy one, not reliant on images, and very apt
TPH, you can skip ahead to step 5. Great job!

- Antibland

You're nearly there - it's "...like you scored the winning goal in the cup final." Good effort though


You have a computer in your bathroom ...you really are American, aren't you

I knew I'd mess up the "football" reference. I did, however, try.


Well, I meant "just look around you" in a general sense, but forgot the level of genius and precision I'm dealing with around here. I should have clarified, RTB, or should I call you "Kent Price living on 3443 Bingem Street!" Thanks, Google Earth!

PS - Some acceptable zen garden themes found immediately around me...

1. crumbs
2. filthy laundry
3. ennui
4. bills

The possibilities, unlike my real-life dreams, are endless.

- Antibland

Add:
shredder
dust
cobwebs
threadbare carpet

DeprecatedDiva,

We really shouldn't be giving away all of these nuggets. We need to start a site called stockzen.com. Graphic Designers will paypal us money to think up new themes for the garden.

Until then...

1. unmade bed
2. dirty body
3. airless vacuum of a room bringing me closer and closer to sweet, sweet death every day (wait, that's not a theme)

- Antibland

No, sorry; you've lost me there :?

Why not start your own HouseAndZGarden. I can contribute some graphics of roses being sprayed with liquid manure, if anyone wants them.

I see ennui.us.com is free - nobody can be bothered to register it.

As soon as a joke needs explanation, it fails to be a joke. Still, my failed joke was referencing this thread
- Antibland

Lorraine, you're way too enamored (frighteningly close to "manure") with this liquid manure you speak of. My pristine image of you is sliding into a deep yet fertile pit of horticultural debauchery.

- Antibland

Yer, I got that; but I didn't (don't) understand the 'Kent Price living on 3443 Bingem Street' bit. Sorry :oops:

Oh! Well, being that I'll never actually know the real location of roytheboy, I thought I would take a random stab at your identity. For the love of...let me off the hook with this one so Lorraine can use my dead joke as fertilizer for her garden.

- Antibland

you sound like you're in pain

BTW: no road in the UK would ever get to 3443 houses. Even 344 would be rare. Maybe that's what ruined the joke

Maybe if you'd said "Joe Bloggs living at 9 The High Street" I might have understood

You'll never realize how true a statement that was.

EDIT: Yeah, I knew I should have looked up an actual UK address. My laziness was the dagger in the heart of my attempt.

- Antibland

That would be my garden in Kent then - I kid you not. Well not quite Kent - just inside the London/Kent border in case anyone's looking

I live somewhere in the east of this collection of speed cameras (which I'm sure Lorraine will be familiar with too) > http://www.kentandmedwaysafetycameras.org.uk/cameras_page04.html

It's a very pretty county that they call the Garden of England

I am all too familiar with those in the west, thank you very much but I *think* I've got the measure of them. Once I hit the motorway, I'm off to the West Country. I must say though Roy you've got it pretty easy on the speed camera front. Have they forgotten all you Range Rover Sport, 4x4, turbo supercharged (and what not) drivers way over there

Tell that to my driving licence

Anyway; we seem to be heading way off topic here so let's pull things back from the brink: what's your favorite Zen Garden submission from an aesthetic point-of-view? (...and how do you find the original designs now there are so many?)

It's such a long time since I visited to be honest - I stopped when I couldn't easily find ones that had impressed me before.

The one I was most impressed with at around the time it appeared was Perched upon a Lily Pad. Not just aesthetically pleasing to my taste but showing the css within the design really gave me a boost on my road to education and enlightenment. (Hey... deja vue... all over again )

Back to the original topic...

What were you expecting from csszengarden.com? Altered states?

The purpose of css is to separate layout from markup. It is just showing that you can redesign an entire site with a simple change of the css file, nothing more. I think.

I have quit looking there for new layouts. I think it is for new fellows that "didn't know css could do that".

We are already back on topic

I've taken some time out to review some of the new and old Zen Garden designs and have come up with three that I particularly liked as pieces of creative art:
Japanese Garden > http://csszengarden.com/?cssfile=/096/096.css&page=10
Bonsai Sky > http://csszengarden.com/?cssfile=/069/069.css&page=13
Zunflower > http://csszengarden.com/?cssfile=/026/026.css&page=18

I also found many examples of how not to design a page, and was staggered at how few designers gave any consideration to visitors who switch from design to design without knowing where they are i.e. no visible difference in a visited link to a virgin one. I was even more shocked at the number of designers who seem to think that we have horizontal browsers!

Thanks for doing the research, Roy.
I liked the first and last designs very much. Good crisp graphics and excellent Photoshop (or whatever) skill.

Bonsai Sky bothered me a bit though.

1) I couldn't see the text against the dark background of what turns out to be one huge picture and rather reinforces antibland's original point. I wonder if the original picture had been scaled in any way to make the gradient grays wide enough to make the text legible or whether we just got what was available.

2) Try the links at the bottom - Dreamfire Studios is live but you have to be a consumate 'mouseketeer' to be able to hit it. None of the others work The css validates apart from warnings about generic fonts and it contains different colours for link, visited, hover paired with active. Surely the html has not been tampered with. What's it all about - I wonder :?

ps I've just realised Perched Upon a Lily Pad is nothing to do with ZenGarden - it comes from http://www.positioniseverything.net/guests/3colcomplex.html. So, nothing I saw of the designs in ZenGarden actually stayed in memory.

My favorites:

www.csszengarden.com/068/
www.csszengarden.com/094/
www.csszengarden.com/041/

There are probably more but I have a life to live and no time to dig further at the moment. Thanks for everyone's great input on this thread, despite its gross deviation from topic. I had fun with it.

- Antibland

I was particularly impressed by this one:
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css

Are there any submissions from members of this board?

Don't you just love it, particularly, when you're on dial-up to watch some of these pages "build" bit by agonising bit :?:

Yuck - thank god we all have different tastes

Are there any submissions from members of this board?
That one is pretty amazing.

- Antibland

Yes, it is quite beatiful.

If you can find the horror one, with a knife at the top of the page, that's my favourite.

Spooky . I designed a site for a Seal Charity ages ago that is STILL not live (due to the client not getting the content together). Without ever having seen that Zen Garden submission (in fact my inspiration was an underwater photo of a seal), I came up with an amazingly similar look to my site, but with a seal instead of a diver ...so similar in fact, that if my site wasn't still under construction I would probably accuse Kai Laborenz of copying my idea (which he obviously has not). Let this be a lesson to us all: two people can have the same idea at the same time!

Finally, the point of CSS Zen Garden:

http://www.mezzoblue.com/zengarden/alldesigns/specialeffects/

My favourites are the stalinesque one:

http://www.csszengarden.com/?cssfile=http://chipgrafx.com/zg/propa.css

and the horror one:

http://www.csszengarden.com/?cssfile=http://adjustafresh.com/zen/mozattack.css

Ths one's pretty clever:

http://www.csszengarden.com/?cssfile=http://www.danikkdesign.com/zengarden/text.css

The horror design is very novel - like it; but the stalinesque design uses a 'shadow' div that blocks most of the links on the page (Mac_FF), making it impossible to use the navigation!

http://www.csszengarden.com/?cssfile=http://www.collind.com/zengarden/main.css

It's just a big image, and cramped text. Hardly what I'd call harnessing the power of CSS :roll:

http://www.csszengarden.com/?cssfile=http://www.learnnewmedia.ca/zengarden/jcd/sample.css

What? An image and some text? Bland. But wait till you see the CSS they used:

body {
	background: #000;
	font: 10pt "Baskerville", serif;
}
a {
	
	color: #000;
}
a:hover {
	color: red;
}
a:active {
	color: #000;
}

#linkList a {
	text-decoration: none;
}
#container {
	background-color: #fff;
	height:100%;
	width:690px;
	padding: 0 0 0;
	margin: -17px auto auto;
}
#pageHeader h1 {
	background: url(1.gif) no-repeat top;
	width: 100%;
	float: left;
}
#pageHeader h1 span {
	display: none;
}
#linkList {
	position: relative;
	background: url(2.gif) no-repeat top;
	float: right;
	height: 1115px;
	text-align: right;
	font-family: "Gill Sans", sans-serif;
	padding-top: 230px;
	margin-top: -1480px;
	}
ul {
	list-style: none;
	margin-right:7px;
}

h3 {
	font-size: 13pt;
	margin-right:7px;
}
ul li a {
	font-size: 9pt;
}
a.c {
	font-size: 8pt;
}
body, #pageHeader h1 {
	margin-top: 0;
	padding-top: 0;

}
#pageHeader h1, #pageHeader h2 {
	height: 255px;
	margin-bottom: -480px;
}
#pageHeader h2, #quickSummary {
padding-top:245px;
padding-left:55px;

}
#supportingText, #preamble, #quickSummary  {

padding-left:55px;
padding-right:200px;
}

I'm guessing that why these are not official designs no?

Just to echo what's been said (i've been away, just catching up with all these countless posts ) the garden is getting old, maybe the fertiliser has run out maybe it's autum.

The early works in spring were wonderful and inovative (I think of http://csszengarden.com/?cssfile=/063/063.css in particular from memory) but now as lots here have noticed it is now just a parade of nice pictures with little inovation it seems which is sad? That said we are still better off with it there than not.

That one's cool - stands up to text resizing and everything

That was the first Zen Garden design I ever saw. I was looking for a tutorial on how to create a background image that resized with the browser window and stumbled across that.