August 02, 2004

The CSS Zen Garden "A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page." There are some wonderful examples here of what CSS can do when used by talented designers.
posted by the_bone 20 years ago
  • thank you bone!! I am a front-end web dev person & I think css is one of the most important developments to be added to the front-end array of technologies in the last few years. I will treasure this resource!! I will design you a beautiful css banana!!!
  • cool page, senor bone. So first i have the HTML, then I build the css for it? Yeah, yeah, i'll RTFM. . . What's the difference between CSS and XHTML?
  • This website has been around for over a year, at least, and I'm surprised its not a double post. In any event, I find it a wonderful source of inspiration and have borrowed from a couple of the designs for my own websites.
  • These will help you down the rough road ahead. Look foward to hacking and hating MS browser tech.
  • I recently redid my blogs layout and alistapart really helped. Another great (if movable type specific) resource is Learning Movable Type. An invaluable took for people messing around with web design is editcss, an extension for Firefox which places an item in the right click context menu that pops up the css of any site and allows you to edit the css of any page (even if it isn't your own!)on the fly. This is such a time saver because you can right click, view the css, change a few things, instantly see what it did and all without making any permanent changes. It is also usefull in see what other people's css is. In the end, I ended up doing what I always did with just plane old html: cut and paste stuff that looks close to what I want and then mess around fidling with the specifics.
  • Wow, this is good stuff. I know a bit of html and css, and I always understood the point of using css, but I never really grasped how flexible it can make your design. These are good case studies. pete, the short, simplified version is that you write the html/xhtml to provide content and to designate what categories your content falls under, then link the (x)html file to the css file, which tells the browser how the page is rendered (make text look like this, display pictures over here, etc.) Check out one of the sample css files. It's all margins, border, padding, font, color, etc.
  • pete_best beat me to the question. Thanks for the summary, MCT.
  • Alista who?
  • CSS is one of those technologies that I find incredibly frustrating. It's undeniable that much cool stuff can be accomplished using CSS, but the standards compliance of major browsers ranges from excellent to abysmal. If you're thinking "Microsoft" here, you're half right. The Windows version of IE does a half-assed job of implementing CSS. On the other hand, IE 5 /Mac was the first browser to get CSS 1 pretty much correct. Not so surprising considering that the IE/Mac team was headed by Tantek Çelik (he helped write the W3C CSS standards and test suites). middleclasstool mentions "the point of using css" - there are numerous reasons to use it, not all of them obvious to the casual observer. CSS allows you to present markup differently according to where it's being presented. For instance, you can have one stylesheet that applies to screen presentation, a second one for print media, and a third for handheld / PDA viewing. You can selectively drop stuff out when it isn't needed. The print media stylesheet could specify "display:none;" for the navigation banner since it isn't needed for the printed version of the page. The PDA version could use a simplified menu laid out vertically to fit the smaller screen. There's even a spec for screen readers for the blind - your CSS can control the vocal modulation of the reader. mmmuttly mentioned Eric Meyer's books as a resource. One of my favorite CSS demo pages is Meyer's Compex Spiral Distorted. Of course IE/Windows botches it. I've heard that the IE 7 hack fixes it. OK, I'll stop now.
  • yed: good example of IE in Windows is MoFi's navbar and logo placement. I've tried to fix it umpteen times, but it's still ugly-as in IE compared to any other browser. I think it's bad in IE on the Mac, too, but can't confirm that right now. Anyone?
  • I'd never bothered to look at MoFi from IE/Mac, which is basically relegated to Outlook Web Access for my work email. You're right, the logo placement is too high. It doesn't look awful but it's not quite right (relative to Mozilla / Safari / et. al.) IE 5 passes the CSS 1 test suite. The coding team even fashioned the "about" screen to resemble the notoriously difficult Acid Box CSS1 positioning test (which the Windows version of IE totally choked on at the time). I'm sure they won friends on the Windows side of the business with that one. :) The CSS spec seems deceptively simple until you consider all of the rules for inheritance, etc. I don't think any user agent has a complete and accurate implementation. Now that MS has killed development of IE (stand-alone Windows version as well as Mac) we can pretty much give up hope of progress from that quarter. Tantek has been moved to the MSN Explorer for OS X project. They've supposedly already implemented much of the CSS 3 draft spec. Nifty pseudo-selectors and all.
  • I find Firefox to be the most pig-headed when it comes to CSS recognition (it can't do my beautiful dashed borders!) - although it does have some fun style trinkets like the thingumy JC mentioned.
  • Anyone? Wow! I never noticed MoFi looking so much better in Opera than IE! Didn't know you had it in you. /kidding, runs in opposite direction
  • I use Firefox all the time and I've never noticed anything untoward in terms of CSS implementation. Maybe you've got some extension that's mucking it up? Or maybe I'm just blind and/or easy to please... I should just put up a big NO IE USERS PLEASE notice on the front page.
  • I think "NO IE Please" is a great idea. I went through all sorts of hell trying to get my site to look good in IE and it still doesn't look quite right in IE for Mac. IE is a dinosaur. I say we let it become extinct.
  • Monkeyfilter looks fine in IE on a Mac. Better than it does in Opera, anyway.
  • I like the look in Opera - I hope we never loose the lavender default. You people with your fancy dancy Mozilla can play with different colours : )
  • Yes, but you don't have a Mac. *hides Mac from jb*
  • The web broswer on my c64 can't read css anyway.
  • *sigh* look, I already learned computer stuff. Now you want me to learn more?! Sheesh! *takes tab A, looks for slot B*
  • I promise I won't steal your Mac. I can steal my roommate's lovely iBook instead. : )
  • Ditto what PigAlien said - How is this not a double-post? I have a crush on Dave Shea. I can't believe he designed templates for Blogger (and that's without even mentioning the other fabulous designers that contributed to the Blogger relaunch). I actually thought about permanently moving to Blogger when I saw that (and comments!). It was a tough decision between Blogger, EE and MT, and I still can't make up my mind. (Except that I have to learn php for EE, so that pretty much narrows it down. And then there's the whole MT licensing fiasco, and yet I just can't seem to let it go..) Considering that I've opened MoFi for the first time ever in IE, wow, IE sure is broken. [*sigh*] No wonder my web layouts always looked so fucked. The gray bar at the top is cutting off the top of the MoFi logo.. I'm learning web design and Dreamweaver MX 2004 at night class at the moment, and loving every minute :o) Maybe I'll even update / revamp my blog site at some point... Now that would be almost too much like dedication.. So anyway, my point was: Cheers to you Monkeys for all the links in the comments too. No doubt I'll be using them in the next few weeks. Apologies for the rambling and slightly OT stuff.. I'm tired, and the scotch is kicking in.
  • On a lark, I checked MeFi prior to posting this and it hadn't been posted there either.
  • Wow, sh*t, that's ... well amazing..