CSS Zen Garden

The Power of CSS

Visit CSS Zen Garden

The site largely speaks for itself, but just to say a few words....

The site is basically a showcase for what can be done with Cascading Style Sheets (CSS). Every example page on the site uses the same HTML document; the only thing that differs is the external style sheet - and just look at how different they are. It's amazing in some respects. It aims to drive home how indispensable a tool CSS really is for web designers; and is meant to be a _big hint_ for people who are still using alternative methods to structure their site.

If you're looking for a bit more general information on Cascading Style Sheets, here's an introduction.

 

Log in or Sign up to hide all adverts.

Fucking-A. I've just spent a month working on an e-commerce site with a person who didn't know what a div was. He cut-and-pasted. Of course, he ended up with several body tags in each page and just one closing body tag.

A great idea for a site. Although I'd to diss some of the examples if I may. The site's first page is a very nice exposition of what .css can do. The others, however, are very image heavy and it is in graphics not css that the styling is done. For example, here http://www.csszengarden.com/?cssfile=/169/169.css&page=0, all the titles are images. The text "select any stylesheet from the list" and "a demonstration of what can be accomp..." have been replaced by images.
An example: This heading is an image.
<img src="http://www.csszengarden.com/169/h3_preamble.gif"><br/>Want to tweak the color for this heading? You have to change every image. Want to change the text? Need an image editor. Want to add a heading? etc. etc. This is bad. The person who designed this is bad. He should revisit web design 101.


Should ideally be done with
style="width: 300px; padding:1px; background-color:#CCBAA8; font-family:georgia, times, serif; border: double 3px #A79785; text-transform: uppercase;color:#6F6253;letter-spacing:0px; font-weight:bolder" eg.

<div style="width: 300px; padding:1px; background-color:#CCBAA8; font-family:georgia, times, serif; border: double 3px #A79785; text-transform: uppercase;color:#6F6253;letter-spacing:0px; font-weight:bolder">The road to enlightenment</div>

You could get it closer with background image, the right font, use of word-spacing. You get the idea, though.

edit: also the images are 200K+. Add the css and the page itself, you're looking at 222K. This is retarded. The problem IMO (and it is a general problem in web design), is that either you get technically competent, but aesthetically challenged techies with no notion of balance, harmony, color, typography etc. etc., or you get aesthetically competent designers who are technical assmonkeys. Rarely can you find competence in both areas.

 

Log in or Sign up to hide all adverts.

You should also note that even if you use a heavy amount of CSS to develop a website, it's actually down to how the browser works as an interpreter to work out if you can pull off certain effects.

One noticable one is for instance generating a Table thats filled with images that piece together like a jigsaw, with a Submission or Textbox embedded into it's positioning.

For some reason it's fine in Firefox however when it comes to Internet Explorer suddenly it develops some form of gap below the box.

Voodoo is also right about the nature of site developers, Either artists can't code or coders can put anything graphical together (I'm the latter).

Although saying that I will mention something that was once put on the news about six months back.

It's all very well having flashy arty websites and potentially even using Flash animations, however those people with disabilities like poor sight need websites that have a decent amount of contrast so text doesn't blur into the background.

For those that have beyond partial sight, every TITLE and ALT tag needs to have a decent descriptive definition of what the "viewer" is missing. For instance if you have "a picture of a Sunlit beach with two people standing on the shoreline, paddling their feet in a calm lapping of waves of a beautiful blue ocean" express it like that than just "Beachpicture.gif".

Partially sighted people use certain technologies that will attempt to Desect HTML and read allowed to them what those tags contain.

 

Log in or Sign up to hide all adverts.

Yeah ...although their work looks impressive, I largely agree - good point! Having said that, they're still a better web-designer than me.

Please Register or Log in to view the hidden image!

It says - in relation to who can make submissions - that it's "Graphic artists only please". I'm curious as to what their definition of a "graphic artist" is. All in all, I still think it's a cool site though.

---------------------

Stryder, I agree with your point about making sure sites are easy to read, and navigate for color blind people, as well as people using text-only browsers (or even browsers on which images have been temporarily disabled).

----------------------

<div style='background-image: url(attachment.php?attachmentid=4187&stc=1); border: 1px solid #dddddd; width: 400px; height: 298px;'>
<div style='width: 250px; height: 200px; position: relative; top: 60px; left: 100px; font-size: 14px; color: #555555; line-height: 33px;'>
Voodoo Child,<br />....maybe we can<br />set a new trend?<br />

Please Register or Log in to view the hidden image!

</div>
</div>

 

That's a shame. I might have taken a shot.