More CSS designs to drool over

Why can't they ever use a good font? Why do whole paprgraphs highlight when I mouse over them?? Like zen garden there are a few good ones but I think they use too much css. The things that make all the zen garden layouts is the pictures. If I could pull high quality pics like that out of my *** I could make good sites too.

Those are awesome websites. Nice books reccomendations too.

Some nice sites there, but they are some of the slowest loading sites I have ever seen, gave up on two of them and one didn't display in ff to well.
That headturn one has one image alone sized at 110kb, and that wasn't the slowest to load. Looking at these sites and back at zen garden I'm begining to think pure CSS is slower than HTML, would be very hard to compare something like that.

Busy wrote: I'm begining to think pure CSS is slower than HTML

Whoah there Skippy! (sorry random expression I picked up from some Welsh bloke I used to know)

Pure CSS results in significantly smaller page weight (think of all that formatting in the HTML being replaced by a single file download and a simple or @import(xyz.css); )

What you're seeing here, is the use of massive images and inconsideration - on the part of the designer - for people on dialup, this is not the fault of css based design!

I think this might be a good example - in Megan's favour - with regard to this argument. It's another part of the Web Designers job IMO.

bja888 wrote: The things that make all the zen garden layouts is the pictures. If I could pull high quality pics like that out of my *** I could make good sites too.

Which you can't, so if you haven't got anything constructive to say, please keep quiet.

bja888 wrote: but I think they use too much css.

That makes no sense.

Quote: Originally Posted by bja888
The things that make all the zen garden layouts is the pictures. If I could pull high quality pics like that out of my *** I could make good sites too.
Which you can't, so if you haven't got anything constructive to say, please keep quiet.

That IS a constructive thing to say IMO because he has a valid point - those designs all look good mainly because of the images they use, not cos they are CSS. You might be pro-CSS but you have to admit he's got a point.

I agree with that statement as well actually. The point of the project (Zen Garden) was to get graphic designers to use CSS and really they're not - they're going with the same old graphical techniques and slapping them into a CSS framework. I disagree that it's just about "high quality pics" though - there is some some impressive graphic design work in there and those artists should be given credit.

What I like about this CSS Beauty site is that the designs are relying more on CSS and less on graphics. There are more good ideas for practical projects.

"Too much CSS" though???? What-ever.

Some of the ones I like are:

http://www.clearleft.com/
http://www.theologisches-seminar-elstal.de/
http://www.hartstrings.com/index.cfm/fuseaction/category.content/categoryID/e9edb47b-d5ff-454f-96f6-044c95432586
http://interllectual.com/
http://www.smarterfuel.com/
http://colorschemer.com/

... and more!

This is also giving me a really strong urge to redesign my site and try to get some actual design work!!

Yeah, sometimes I contemplate using a CMS or a blog script and edit the Graphics, Gladly upto now I decide to always design from scratch (though I recycle codes that Ive made before)... Most sites I make are Inspired by the zen Garden, I just bear in mind the usability issues... But Im glad I saw another inspiration place, although I agree they use pretty much large sized images, the CSS coding was quite great for those sites in CSS beauty...

I've had that site in my bookmarks for a while..

I love this site:

http://www.designchuchi.ch/

Definetly makes me motivated to learn CSS!

-Rob

Hey Megan, thanks for the link! Those are some amazing sites featured...wish I knew CSS! I guess sites like that show me what can be achieved (if only I put my mind to it, I could learn CSS and start coding myself!)

David

Really love that smarter fuel one - quick question, the titles on there (H2 etc.) seem to be anti aliased as though they are images, is this a feature of CSS or what? How is that achieved?

nice sites!

http://www.dustindiaz.com/ is one of my favourites!

Well it's not the argument that I'm taking issue with, it's the way bja wrote it. It's like saying: "If I could draw then I'd be able to come out with a good design." Which immediately makes me think: "Well obviously you can't so shutup."

Had bja just pointed out that these sites are heavily reliant upon images instead of good coding and inventive use of CSS I would have agreed. That non-entity of an argument just made him look a complete pillock!

So he might have had a point if it had been written in a coherent sentance

It was coherent since everyone else got the point

It's exactly how i'd have written it pretty much, if i could make images appear from nowhere then i'd be able to make such nice looking sites.

Fine that.

Well PRACTICE PRACTICE PRACTICE, Learn Learn Learn... youll get there eventually...
Just to make everyone drop the point...

To my opinion, good graphics with good usage (or effective) CSS is a great formula in making great sites... We still have so many issues, like usability, lets not argue about this and lets try practising semantic markup and standards compliance...

Last night I was talking to a old friend who might of been intrested in designing for optimal source. To make a long story shot, he was intrested untill I told him what he was required to do to in order to sell on my site. Basicly it came down to this sentance...

Quote: Optimal Source websites are designed for content, not for stock images.

Another good place to look at CSS sites is at the http://www.cssvault.com

Cool, thanks Matt!

Ok, I tend to agree that for the most part CSS helps. I think the big thing that threw me away from first using CSS were examples where all the CSS was defined in the tag with the STYLE="" attribute. doing hello seemed a lot easier than hello. It is kinda like first learning Object Oriented Programming, usually you learn off of small samples that make it seem like way more work than in needs to be.

Anyhow, here is the first thing I have come across in the standards that really doesn't fit.:

Quote: Previous versions of HTML allowed the use of the start attribute in the ordered list tag to control what number or letter the list would begin with. For example, the following code would have started a list with the decimal number 10:

However, the start attribute of the tag has been deprecated. To date, no replacement CSS style has been defined. Although you can use the start attribute, your document will no longer be XHTML compliant.

To implement flexible numbering, use the new CSS2 automatic counters and numbering feature. This feature uses the content property along with the new counter-increment and counter-reset properties to provide a flexible yet powerful automatic counter function.

The following style code will define a counter and cause any

list to begin with 10:

ol { counter-reset: list 9; }
li { list-style-type: none; }
li:before {
content: counter(list,decimal) ". ";
counter-increment: list; }

What is wrong with the original? Start=10 was setting content, not layout. I mean, this is like coming up with something like the following (I'm making this up as an example):

Quote:
a { href-url: http://www.mysite.com/; }

Link to my site

I think this is the first example I have come across where CSS has crossed the line of what it should be used for. Are there any other examples of something like this?

-Greg

I just encountered that the other day! Is counter-reset even supported???? I'll try it out and see but I don't think it is. I agree with you on that though.

And inline styles should be the exception not the rule! That's for sure. Oh, and another problem with that example is that is a legitimate structural tag - no reason to do font-weight: bold if something is structurally .

The other one I really don't like is target="_blank". Some people insist on links opening in a new windows (although, you could argue that the target audience wouldn't know how to make links open in a new window if they wanted to so it's a valid technique).

Tried it - that code works in Opera but not in FF or IE. And the numbering starts at 10 not 9.

Quote: Unfortunately, at the time of this writing, only the Opera browser fully supports counters. However, the other user agents should adopt this feature in the future.

(book was from this year)

-Greg

So are people starting to agree with me that a new language needs to be developed or am I reading between the wrong lines?

I think it's more an issue of good, uniform support from browsers rather than a language issue. I think the specs for a good language are already out there, it just needs to be read correctly by more browsers.

FF and Opera are pulling others (IE) that way, though.

It doesn't appear that css / xhtml has much room to expand though... Can websites become more breath takeing?

Ever hear of SVG? Know anything about CSS3? Lots of things happening there and who knows what else they'll come up with.

This is yet another thing I think should be left to the experts! Of course, as Tim said it's all dependent on what he browsers support so we're all at their mercy unfortunately.