More Eric Meyer
April 14, 2004
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.
Congrats on number 100. It’s been great watching it grow.
And that is one fine Zen Garden design! I bow before you guys.
Congratulations on 100. What a fine design to celebrate it with!
#100 couldn’t have been a better design! Congrats on hitting the century mark
Glad to have been a part of the first 100 :)
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!
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
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. :)
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.
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.
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!
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!
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…
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.
Hmmm the site comes out all pink for me on Mozilla/Linux 2.6. Odd, eh? Is this perhaps because of gamma differences?
Just to ask Dave, is the black box in IE 6 supposed to be there in the 15 pedals?
Happy 100th, Dave. It’s been a hell of a year, and I’m sure the next hundred will be just as great.
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.
15 Petals is simply beautiful, elegant and interesting. I can’t wait to read how you guys pulled it off.
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
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.”
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!
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.
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…
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!
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?
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…?
Yeah, thats only 100 official designs, not even including all the unofficial designs you have… i.e. mine :-D
> 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.
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.
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.