It has started!
I’ve put the new layout online! Of course I know work needs to be done on it, but I know myself: I’ll only do that when I put the new thing live :). The sidebar is widgetized, and I’ve tried to use as much css3 features as I could ;). I’ll be adding fallbacks for all the different css3 stuff in the coming days, for now, it looks best in a WebKit nightly build, and it looks pretty good in Firefox too… Let me know what you think!
Of course I need to thank Laurens, from TND media, for creating the design in Photoshop!
May 28th, 2007 by Joost de Valk in
CSS3.info.
You can leave a response, or trackback from your own site.
Congratulations!
You are doing a very good job in helping out users implementing CSS3 specific features. I hope that Mozilla and Microsoft are listening and update their browser quickly.
Indeed, in WebKit (Safari) nightly build, CSS3.info looks stunning. There is just a bit too much shadows, though. I’d remove the shadows from the title of the sidebar blocks.
I don’t mind seeing your site break in Internet Explorer 6. Let the users switch to Firefox or upgrade. CSS3.info is working fine in IE 7 and Firefox.
Hmm, it has a horizontal scrollbar in a 1024×768 sized window in Firefox:Mac. There also appears no padding on the left side. See here: http://img267.imageshack.us/my.php?image=picture1dc0.png
Kroc: thx! fixed it.
Ow and Jacques: thx a lot for the warm words!
Awesomeness! This is actually very impressive. I used some css3 on my older weblog before (opacity, border-color, border-radius, multi-columns) and the new one as well, but the result was not nearly as nice as this. Kuddos on this ‘grensverleggend’ work!
yw joost.. and thank you too :)
‘Ey Joost,
Nice work - very stylish for a site about css3 :)
Guys it looks awsome, great work realy!
I must confess it: I’m a little disappointed. It smells a bit of a use-the-feature-because-it-exists. Especially the use of text-shadow is overdone. I much prefer the look of the site on the latest Gecko Mac nightly build than with Webkit builds.
Is that a WebKit bug or a layout bug? The box-shadow on the first comment above is no painted on the right hand-side.
(and I would be nice if the submit button was not styled :-)).
Great new look. In my Firefox (2.0.0.3) I don’t see any drop-shadows but the rest looks clean and well implemented.
I’m looking forward to see this growing with more CSS3 goodness.
How’s about a screenshot for those who can’t see it in Safari? ;)
I wish that either I had a Mac available to me right now to view this page on, or that Firefox had more support for CSS3. Anybody using the latest nightly of Webkit care to take a screenshot for those of us who don’t have macs?
It’s a pity that this page doesn’t validate in W3’s CSS validator (http://jigsaw.w3.org/css-validator/), but no CSS3 feature will validate for now. Thats part of the reason I don’t use it as extensively as I could; I don’t really mind that my blog doesn’t validate because Blogger won’t produce anything particularly valid anyway, but I’m a bit more concerned about everything else I make.
Also, something is wrong with the submit button, at least in Firefox 2.0.0.3; there seems to be a light gray rectangular box OUTSIDE of the border-radius. It looks just fine when hovering, but when not hovering it looks a bit off.
Hi Joost,
Congrats for the *new look*. It is great.
Please don’t stop, go ahead! You are doing a great job.
Feedback: The #sidebar is jumping below the #content in IE6/Win (ugh!).
I give a try with AIS toolbar here and notice that; * html #sidebar (…; position:absolute;} fixes it.
I’m not sure if this is the best solution and don’t know about drawbacks in doing so, but I hope this could be useful.
Long life!
I liked the previous design more than this… I think this is a little too white, and the design is a little bit bussy.
Also:
* the menu breaks when I do the CSS selectors test;
* there is a white ‘border’ under the footer, is that that what you meant or is it a bug?
The white ‘border’ seems to be caused by a small smiley-face image in the bottom left corner, “g.gif”, hosted on WordPress’s server. That’s a mighty odd place to put a smiley.
Covarr: ah thx a LOT. That’s WordPress’s stat’s package. Let me disable that right away.
Arjan: fixed both issues, thx for letting me know. And I do appreciate all your opinions, both “negative” and positive :)
Great work guys. Keep it up. I’m very interested to see where this website goes as CSS3 starts to really take off.
As for the re-design; I have to say I’m a little disappointed. I much preferred the old version. I think this design took a step backwards. That great header graphic you had is now a bit lost and understated.
Hmm more people have been talking about the header graphic :) I’ll have to talk to Laurens and Niels about getting it back a bit more perhaps :)
Someone post a screenshot from Webkit nightly plz :)
Here we go.
screenshot
http://farm1.static.flickr.com/227/520838231_6fa41f317c.jpg
I tried posting using XHTML to no avail.
Jacques: you did it correctly, only thing is: you actually have to give an anchor tag for an anchor to work ;) updated your first comment ;)
Unfortunately this page isn’t validating for me; the ‘Login’ text in the ‘Meta’ widget is missing an ” starting tag.
However, nice 2.0 look, and great information.
Apparently WordPress is stripping out my code. The missing text in brackets, that is causing the failed validation, is and ‘li’ tag.
Guy: fixed that, thx for noticing! (I had just updated that widget ;) )
You’ve fixed that, but your ‘Advertise on this site’ link is missing the closing ‘li’ too. Good old FireFox plugin ;)
On another note, I’m a fan of your site. It’s got some nice info, and the selectors test is great. Keep it up!
Hehe Guy, and fixed that too :)
Well done! Love the new design, very Web2ey :)
It’s very good design! Well done, and good CSS coding skills!
Thank you for your helpfull tips!!!