Sponsored by FUNimation Enertainment
Rei's Hot. Watch 8 Minutes of the new Evangelion 1.01 Movie view!
funimation.com - Available Now on DVD. The rebuild of the ground breaking anime Neon Genesis Evangelion
55 Comments
- TenebrousX, on 10/11/2007, -0/+30People who still use tables for layout
- TenebrousX, on 10/11/2007, -1/+21I always get inspired when I look at Zen Garden designs, then attempt to make something that looks halfway decent and fail miserably. I think I'll stick to writing the code :-)
- inactive, on 10/11/2007, -2/+21who downtalks css?
- edesignweb, on 10/11/2007, -10/+24you know what's great about this? The people that downtalk css because they have no sense of creativity and thought patterns can't hold a candle to this *****. It really seperates the designers from the programmers. They aren't the same, and I will not learn Ruby because I design. It's like designing a website because you do tech support. I love zengarden.
- inactive, on 10/11/2007, -3/+14because it's not that good??
- deansfurniture5, on 10/11/2007, -0/+11Download firebug for firefox (http://getfirebug.com) and poke around by "inspecting" different elements on pages you like. It's very, very easy to see how people achieved different effects and a great way to learn.
- keepclear, on 10/11/2007, -0/+10This was mine - http://www.csszengarden.com/?cssfile=139/139.css
Actually made it as offical design, I shudder to think how I coded it now though. - rupture231, on 10/11/2007, -0/+9I love zen garden, and I hate the fact I have the CSS knowledge to do something that spectacular but not the creativity. =/
- actionscripted, on 10/11/2007, -8/+15@edesignweb: What the ***** are you ranting about? Refusing to learn a programming language "...because I [you] design..." is retarded. If you can design, learning a programming language (the basics behind web development) and it will make your designs even better. Little things like information architecture and usability can be severely enhanced by learning a little programming.
It's not like there's a switch in your brain that turns off your creativity when you start programming. Stop being ignorant. - detrate, on 10/11/2007, -2/+8I don't know how you people don't see that as a creative use of CSS but you find simple ones like this: http://www.csszengarden.com/?cssfile=/044/044.css&page=19 amazing
go digg! - keepclear, on 10/11/2007, -0/+6Working on a CSSZengarden entry was how I learnt css/xhtml coding. There's some great work archived on there, bit like an internet time capsule.
- tokage, on 10/11/2007, -0/+6Some really interesting stuff, for sure. Each is like its own work of art -- true CSS mastery.
(*jealous*) - Jugalator, on 10/11/2007, -1/+7I dunno about other browsers, but at least in Opera, no hint is given on that the center area is even scrollable, and that's probably considered bad.
edit: yeah, confirmed in IE 7 too... just because something is pretty doesn't mean it shouldn't give visual hints... at least imo - theratdotus, on 10/11/2007, -1/+6php?
- Veritas77, on 10/11/2007, -4/+7This all looks like the work of designers who forget that the purpose of a website is to communicate information with the lowest and fewest possible barriers to the consumption of that information.
Digg me down as I'm sure you will, but as someone who has to deal with primadonna designers on a daily basis, this stuff makes me cringe.
CSS/XHTML is quite powerful and provides a host of benefits, but this kind of stuff reminds me of the overwrought Flash pieces of crap we saw during Bubble 1.0.
Oh, and just to be on topic, edesignweb, your refusal to learn something outside of your perceived sphere of interest is not a good long-term attitude. - TruckStuff, on 10/11/2007, -0/+3As a programmer who works with creative/graphic types every day, I can tell you that it is extremely difficult to learn "good" art (because I'm no good at it). Much of CSS is artwork, and you can teach some basic principles of artistic design, but much of it is intuition and natural ability. To say that one person can code and design very well is to oversimplify both professions. People who can do both well are few and far between (which is not to say they don't exist).
And to those folks who complain about the this site not being SE-friendly, or being "too artsy," that's the entire purpose of CSS Zen Garden. Its supposed to be an artistic showcase of what can be done using only CSS. Its not supposed to rank high in Google or be easy for your grandmother to read. Its a gallery. - franksands, on 10/11/2007, -0/+2These are proof of concept designs...to show the real power behing CSS. It doesn't mean you actually have to create a site that looks like a movie theater.
- TenebrousX, on 10/11/2007, -0/+2database (MySQL), logic (scripting languages like PHP or Ruby), and content (HTML)
- rosefu, on 10/11/2007, -0/+2@thailand1972
"- all headlines are graphical (not helpful for search engines)"
That's the beauty of CSS (at least when coded properly). Search engines and users who turn off all style sheets and images can still read graphical headlines, as long as a good image replacement technique is used.
"- visited links stay same colour as non-visited links"
This is being done everywhere now, and on the vast majority of commercial sites.
As far as learning some basic programming is concerned, I agree that a good designer should learn some scripting, AJAX, PHP, etc. and get their hands dirty in a few CMSs in order to design better. - flukus, on 10/11/2007, -0/+2Because there two different jobs. Usually people who can design are crap coders.
- franksands, on 10/11/2007, -0/+2I always liked one of the first ones http://www.csszengarden.com/?cssfile=037/037.css, because it completely changes flow of the text from vertical to horizontal. Amazing job.
- jaxshores, on 10/11/2007, -0/+1I met Dave Shea the creator of this site at @media 2006. He's an awesome guy as well as talented designer. CSS Zen Garden has provided inspiration for my work for years. Beautiful gallery.
http://www.mezzoblue.com/ - This is his personal site. Great articles on web development.
http://www.amazon.com/exec/obidos/ASIN/0321303474/mezzoblue-20 - Buy his book, its awesome. - inactive, on 10/11/2007, -0/+1Of course there is, seperate markup and presentation. It's really not that hard. Something makes me feel like you never learned HTML or how to include css and use headers and footers.
- MikeyC, on 10/11/2007, -1/+2Digg's CSS file appended to the csszengarden URL: http://csszengarden.com/?cssfile=http://digg.com/css/20/global.css
Doesn't really work that well. Surprised that no one has submitted a digg-like parody. Dave Shea used to have a separate section specifically for parodies of real sites.
TWiT works a bit better: http://csszengarden.com/?cssfile=http://www.twit.tv/themes/twit/style.css - inactive, on 10/11/2007, -4/+5"I will not learn Ruby"
WOW. With Ruby on Rails to use HOW MUCH ***** LAZIER can you be? - qbkooky, on 10/11/2007, -0/+1Not a bad post, but I would've liked to see some explanation on why this person liked these 15 layouts over the other hundreds (I'm assuming...?) that are out there.
Otherwise, it's just a bunch of CSS Zen Garden links. And maybe it's just me, but I feel like I've seen them all before. Beautiful and interesting and diverse........... but I've seen them all before. - dotancohen, on 10/11/2007, -0/+1Nice, nice, nice. Lots to learn from here.
- resplence, on 10/11/2007, -0/+1Shaun Inman really needs to stop using such ridiculously small fonts.
- Mikekuul, on 10/11/2007, -0/+1I love Obsequience, been one of my favourites for a while now.
- ICSU, on 10/11/2007, -0/+1Well, some are good and some are too artsy to be actually useful.
- xswag, on 10/11/2007, -1/+2@deansfurniture5
The Firebug tip is great. Thank You! - rosefu, on 10/11/2007, -0/+0@thailand1972
Actual raw text headlines are used in CSS Zen Garden, through tags. If you're using Firefox, go to View -> Page Style -> No Style, and you'll see what I mean. It *is* raw text, only treated with graphics when the situation calls for it (logos and headlines, for example). No alt tags needed.
A bit of self-promotion, but this is the design I submitted to CSS Zen Garden:
http://www.csszengarden.com/?cssfile=/194/194.css&page=1
Turn off the style sheet and tell me if search engines can't read that.
As far as visited links being colored as "visited" is concerned, that actually becomes a usability hindrance when it comes to tabs within a page that would look like they have been visited when they actually have not. Also, with dynamically generated content (especially various pages based on PHP/ASP/XML etc.) you do not necessarily know if a page that has been visited is actually "old" information (which is why a lot of people use RSS feeds). - AntoineDigg, on 10/11/2007, -1/+1I think the title is wrong, I don't see 15 great design, maybe 5 of them, that's about it.
- maestroh, on 10/11/2007, -1/+1i kicked around the idea of making one of these.. but uhh, i'd rather just drink beer and play xbox
- rapunzell, on 10/11/2007, -1/+1Probably because regardless of the coolness of the concept, the execution blows. The main portions of the content (so what is this about, participation, benefits, and requirements) are impossible to read because they're about as unintuitive as you can get. "So what is this about?" and Participation look like credits so my brain automatically tried to read them across like credits. The way Requirements is arranged into 3 absurdly narrow columns makes it look like badly justified text that i also tried to read across rather than down. Both areas require you to scroll down as you read it then scroll all the way back up to read what's next to it.
It's the same problem i fight with "designers" about every day. It doesn't matter how cool your stuff looks. If it doesn't work in a way people can figure out and use easily, they won't use it at all.
jugalator - You don't consider the scrollbar your browser always has as a hint? - phoopee3, on 10/11/2007, -1/+1i've always wanted to do a css zen garden design. seeing these does not motivate me. haha
- thailand1972, on 10/11/2007, -2/+1scr4pper, for me, there are much more usable CSS designs at oswd.org - ZenGarden is eye candy fat header designs that just aren't practical unless you're designing a website for a design studio / modern art fan. Might as well make posters in Photoshop.
- OutThisLife, on 10/11/2007, -2/+1@people who code, not design:
So you can code it. But what do you code if you can't design? - ecclaim, on 10/11/2007, -1/+0Isn't the whole point of CSS to allow one to change the presentation layer without regard to the source, whether that is static HTML or HTML that is dynamically generated on the server through some mechanism such as PHP or ASP? Unfortunately the majority of accepted official designs at the CSS Zen Garden fail miserably in this regard because most renditions require all manner of custom images.
Whether one agrees or disagrees as to the applicability of the individual designs with reference to their usability versus their artistic content, IMO the CSS Zen Garden fails miserably to promote the use of CSS as the layout control method due to the requirement for the number of custom elements. - thailand1972, on 10/11/2007, -1/+0@rosefu
"- all headlines are graphical (not helpful for search engines)"
That's the beauty of CSS (at least when coded properly). Search engines and users who turn off all style sheets and images can still read graphical headlines, as long as a good image replacement technique is used.
Huh? So the beauty of CSS is that you can use graphical text? What a bizarre statement - you can also actual raw text as headlines and the search engines and humans can still read those too :). A search engine just sees an image with graphical text. Sure you could add 'alt' text to the image but it's of much lower value semantically than a headline (H) tag. I find your point bizarre.
"- visited links stay same colour as non-visited links"
This is being done everywhere now, and on the vast majority of commercial sites.
Hmmm....."everyone else is doing something wrong, so that's ok then". No it isn't. It's very helpful to know where you've browsed before, particularly if you're visiting a site again after a few days. New links stand out (when you colour visited and non-visited differently). - edesignweb, on 10/11/2007, -2/+1***** all of you...
- scr4pper, on 10/11/2007, -2/+0thailand1972: They _did_ make posters in photoshop, with some run-of-the-mill styled HTML surrounding it. I have always been baffled that so many designers can fool themselves into thinking they are making some kind of point about how CSS should be used by making these css zen garden pages. Great looking layouts and typography like this come from programs like photoshop and illustrator, and have nothing to do with CSS.
- flukus, on 10/11/2007, -4/+2Most of those arn't very usable. Alot of them are taken up way to much by pictures and most use fixed positioning, which will break on alot of mobile devices and smaller resolutions.
I'm not saying css is bad but more often than not a simple layout with minimal pictures are preferred. Using colours is more effective. - cleric85, on 10/11/2007, -4/+2Again fooled. I thought it was a Counter Strike Source.
- sbrickner, on 10/11/2007, -3/+1I agree. I don't do web *pages*, I build web apps. Who the hell needs layouts that are tuned for one particular page's HTML? You may as well just use table and font tags.
One thing that I always thought CSS Zen Garden really needed was a set of guidelines on marking up HTML to make it "friendly" for CSS-based designs. I want to be able to generate HTML and (in theory, if not in practice) put a style tag in the root that points to a CSS Zen Garden stylesheet and have it pretty much work.
I get it that that's not what they're trying to do, but there really are no decent guidelines on how to mediate the relationship between the HTML and the CSS. - bradkovach, on 10/11/2007, -3/+1I'z only codes teh webpages in teh latest LOLcodes wif CSS and mah Fotoshop!!!11!one! Mah pagez are standurdz complyent, too!
- scr4pper, on 10/11/2007, -2/+0I always thought that the css zen garden concept was a bit disingenuous. There's really not a lot about those designs that is specific to CSS. Most of what makes the designs impressive is in the images, rather than the text that CSS actually styles. I mean, I guess it's nice that they were able to make columns and place text so as to make room for their nice image based layouts and all, but it's not exactly making me feel any kind of "CSS zen". I think more of the designers who won probably experienced "Photoshop and Illustrator zen" (or whatever you want to call it), then simply arranged it with a little CSS that any web designer should know.
- theratdotus, on 10/11/2007, -3/+1whats the best way to learn css? i picked html up off http://www.yourhtmlsource.com/ but the css section kinda gets alil intertwined. css is so clean and bootyfull. after i saw what it can do i wish i learned it earlier. so much to remember though. to make a site so intergrated with the entire rest of the interwebs is really something. what should one learn after css?
- rupture231, on 10/11/2007, -5/+3To be honest, I learned from designing my own custom myspace, working with the selectors myspace has in its cluttered code helped me to learn a lot about CSS fast.
-
Show 51 - 56 of 56 discussions



What is Digg?