TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

More Eric Meyer

April 14, 2004
More Eric Meyer on CSS

Well since the cat seems to be out of the bag, More Eric Meyer on CSS is hot off the press and on its way to a bookstore near you. As a technical reviewer of the book (along with Porter Glendinning), I’ve read it thoroughly a few times, and I can tell you that it’s a real treat.

Eric steps you through building 10 projects, and you can’t help but come away wondering how he makes it look so easy. The resulting CSS is astoundingly light and straightforward, just the way the W3C intended it. I wish I knew CSS like Eric Meyer knew CSS.

If you loved the last one, there’s more to love in this one. If you didn’t like the last one, you should give your head a shake and buy it anyway.

(My promo copies arrived the other night and I’ll corroborate — it’s really tomato-soup-red, not hot pink.)


But the fun doesn’t stop there! We planned a special treat.

Chapter 10 deconstructs the building of a css Zen Garden design. Added just now, “15 Petals” is a collaborative effort between Eric and myself, and marks official design #100.

Holy cow. 100! There’s something wildly satisfying about having a hundred uniquely incredible submissions to a project which was started not quite a year ago. And there’s something supremely felicitous about having Eric Meyer contribute design #100.

Grow, baby, grow! I couldn’t be more proud.


Reader Comments

Todd says:
April 14, 01h

Congrats on number 100. It’s been great watching it grow.

And that is one fine Zen Garden design! I bow before you guys.

April 14, 01h

Congratulations on 100. What a fine design to celebrate it with!

ray says:
April 14, 01h

#100 couldn’t have been a better design! Congrats on hitting the century mark

Glad to have been a part of the first 100 :)

Neil T. says:
April 14, 01h

That is one awesome design. My only criticism would be that links are only differentiated from text by colour, and not one that is substantially different from the body text. My recollection of web accesibility guidelines suggests making links underlined or emboldened so that people who are colour blind can see them.

Other than that, it’s almost faultless. Well done!

Derek says:
April 14, 01h

As Dave noted to me, Wiggles the Wonderworm is so fabulous that it deserves to have been #100:

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

Still, it makes a pretty fine #99, and is my new favourite, besting Miracle Cure, by the same designer (which I didn’t know until afterward):

http://www.csszengarden.com/?cssfile=/082/082.css&page=1

April 14, 02h

Congratulations on number 100! Here’s to another 100 in even less time! ;) Now that there’s a whole chapter devoted to making a CSS Zen Garden entry, I think you can expect an exponential increase in the submissions. :)

April 14, 03h

The design was so good it actually made sit down and re-read the content of the Zen-Garden. Well worth reading again I think. I hope you are deservedly proud of your achievement Dave. Congratulations.

Brad Bice says:
April 14, 04h

Great Zen Garden designs. I especially like the creative #99 design.

I don’t see why there aren’t areas devoted to each design for the creators to talk about the creative process or just to say “Enjoy.” if they want. I think this would be a great way to promote techniques in CSS and XHTML and would accopany the Zen Garden designs perfectly.

We would all benefit from each design’s backstory.

9
Will K says:
April 14, 07h

I was absolutely stunned when I saw 15 Petals. Absolutely gorgeous! I noticed that the photos seemed vaguely familiar in a weird sort of way, then I noted the author(s) and I knew that Eric had taken them, and where. meyerweb today confirmed my suspicions. My wife and I are taking our nieces to that same Botanical Garden on Monday (on a visit from Connecticut – and they’ll *love* the CBG!). I gotta take my camera…

BTW, can you guys send me your .htc solution for the PNG when you get it to work? I’m still having trouble…

Thanks in advance – for everything!

arki-Eric says:
April 14, 08h

My congratulations as well, Dave! I am glad to have been a part of the first 100, and I hope to be a part of the next, though I suspect the bar will continue to be raised :)

Brad, I’m guessing there aren’t areas such as you suggest because Dave has a life… but several designers have talked about their designs in their own webspace, notably Doug Bowman (Golden Mean). I’m planning on writing a post (when I get done with school) on my design (#88). Maybe Dave…oops, I’m talking about Dave in the 3rd person…maybe you could create a page that has links to these discussions on the individual authors’ sites?

It’s great to see the Garden maturing (growing? blossoming? sheesh…) and extending its sphere of influence - I got an email from an asp developer a couple weeks ago saying I had inspired him to attempt better design and move away from table layouts after he saw what was possible with CSS. That was a pretty cool email to receive. Thanks, Dave!

Brian says:
April 14, 08h

Dave,

I remember (from my own trial-and-errors over the past month or so) that the .htc trick for getting PNG-24 to display correctly in IE doesn’t work so great for background images. For images with the tag it works fine (most of the time)… sigh… i used to know the specifics, but it’s escaping me at the moment…

12
Nick Cowie says:
April 14, 08h

Congratulations on reaching the 100 design milestone, 15 Petals in a stunner.

Though it did get the wind taken out of it’s sails by “Wiggles the Wonder Worm”, I was laughing out loud in a office full people and rereading the whole css Zen Garden content for the first time in a long time.

April 14, 09h

Hmmm the site comes out all pink for me on Mozilla/Linux 2.6. Odd, eh? Is this perhaps because of gamma differences?

April 14, 11h

Just to ask Dave, is the black box in IE 6 supposed to be there in the 15 pedals?

Ethan says:
April 14, 11h

Happy 100th, Dave. It’s been a hell of a year, and I’m sure the next hundred will be just as great.

eric says:
April 14, 11h

Beautiful new Zen Garden entry.

But what’s the deal with the more eric meyer site? It’s all stretchy and it’s _definitely_ in shades of pink.

April 14, 12h

15 Petals is simply beautiful, elegant and interesting. I can’t wait to read how you guys pulled it off.

Jon says:
April 14, 12h

Hi.

I’d actually like to know from Dave or anyone else if you all think that this book would be better than the first one. I’ve been considering going between the first and the second book, and I definitely do know most of the basics of CSS; it’s the more sophisticated styles that I’m trying to master at this point. So with this in mind, which book do you think I should go for? Thanks. Peace.

-Jon

19
Kyle says:
April 14, 12h

I like the 100th design. Congrats!

I have to say, that I love the creativity behind “Wiggles the Wonderworm” even if its not as pretty as “15 Petals.”

April 14, 12h

My copy is supposed to be arriving tomorrow, after I ordered it from PeachPit directly. I really liked his first book, and although my CSS is pretty good already, I wanted it for the collection.

“Wiggles” was totally unexpected. I thought I’d navigated to the wrong page for a second!

April 14, 12h

JJ: the big black block was IE/Win’s default rendering of the PNG graphic. The problem should now be fixed on a temporary basis, although you might have to empty your cache and reload to see the change. Hopefully we’ll figure out what went wrong with the PNG support in short order and get it fixed.

Eric: It’s definitely in shades of pink on your machine, and on many others. Not mine, though, and I checked on multiple machines. I suspect it’s Yet Another Gamma Variance Problem. As for “stretchy,” there you’ve confused me. A more detailed explanation would be helpful.

Dave S. says:
April 14, 12h

No, the black box surrounding the top flower wasn’t supposed to be there. We tried to get around IE’s PNG deficiency using the .htc hack, but obviously it didn’t take. Fixed with a slightly uglier GIF for the time being (only for IE, everyone else can still bask in PNG glory) but we’ll look into it. Thanks for pointing it out, JJ.

Jon – both books offer the same project-based approach to learning CSS, as Eric walks you through the creation of various pages step by step. The new book has some more advanced (and enhanced) CSS than the last, which makes it more fresh, but both offer some pretty solid grounding in the basics. They’re both good; it’s definitely a tough choice and one I’m glad I don’t have to make. So, I guess I’m not much help in deciding…

Stefan says:
April 15, 03h

Great work Dave and I’m looking forward to read the new book by Eric!
One thing regarding the Garden: Could you offer thumbnails of the designs on the “view all designs” page? It would be much easier to find a particular design. Thanks!

24
Ronald van der Wijden says:
April 15, 05h

15 Petals is gorgeous, and it’s great to see two such great names as contributors together.
I haven’t been around The Garden for a while, and was again blown away a couple of times by the recent designs; it never ceases to amaze me what these people can come up with, using only CSS.
A real contrast can be had, by the way, by modifying the URL to design “101” (or anything higher than the last one) to see the document completely unstyled.

And, Wiggles was fantastic; waddayamean, taking design to the extreme?

25
Brian says:
April 15, 09h

Eh… back to the png-24 in “background-image”… couldn’t find everything I was looking for, but I did some twiddling and this is what worked for me… Dave I’m assuming you and Eric are probably already on top of this, but just in case, here’s one solution that worked for me:

#div-in-win-ie {
background: transparent url(/images/spacer.gif);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/images/intended_png24_filename.png’, sizingMethod=’scale’);
/* other properties for position, width/height, etc… would follow… */
}

I vaguely remember also using something that made it work without using a filter, and only using an .htc file, but I can’t seem to get it to work anymore. Or perhaps it was my imagination that it ever did work…?

Dann Ryan says:
April 16, 09h

Yeah, thats only 100 official designs, not even including all the unofficial designs you have… i.e. mine :-D

eric says:
April 16, 10h

> As for “stretchy”,? there you’ve confused me. A more detailed explanation would be helpful.

I was referring to the fact that it the layout widens out to a full screen width if that’s what your browser happens to be set to. Mine isn’t _usually_, but it was at the time, so I noticed. I guess it’s a personal design preference, but I found it really hard to read.

If it’ll help, it showed up pink at all but the most extreme viewing angles on my iBook.

H. Wiedow says:
April 18, 03h

I have studied the first ( book Eric Meyer on css)
At first I was very angry that Eric doesn’t take care of IE browser.
Most of the examples are not working correct in IE, but I think the whole community should ignore the dame IE. Maybe one day the IE is under 1% in the statistics.

But anyway, I will buy the new book from Eric. I find it a good idea to discuss the chapter with the Zen Garden Design.
I think I will develop a design for zen-garden too and hope it will by good enough.

I love the side there are so many ideas and you can show everybody what is possible with css.

29
Conor says:
April 26, 12h

Man that design looks great, I wish i had that kind of still, perhaps ill give it a look, as my CSS skill could really use some help.