-
200728 May
Posted in News
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!
You can skip to the end and leave a response.
-
Comments
-
01.
Jacques says:Comment » May 28th, 2007 at 7:11 pm
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.
-
02.
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
-
03.
-
04.
Ow and Jacques: thx a lot for the warm words!
-
05.
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!
-
06.
-
07.
‘Ey Joost,
Nice work – very stylish for a site about css3 :)
-
08.
-
09.
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 :-)).
-
10.
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.
-
11.
Adam says:Comment » May 29th, 2007 at 4:16 pm
How’s about a screenshot for those who can’t see it in Safari? ;)
-
12.
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.
-
13.
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! -
14.
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? -
15.
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.
-
16.
Covarr: ah thx a LOT. That’s WordPress’s stat’s package. Let me disable that right away.
-
17.
Arjan: fixed both issues, thx for letting me know. And I do appreciate all your opinions, both “negative” and positive :)
-
18.
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. -
19.
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 :)
-
20.
Someone post a screenshot from Webkit nightly plz :)
-
21.
-
22.
Jacques says:Comment » May 30th, 2007 at 2:52 am
http://farm1.static.flickr.com/227/520838231_6fa41f317c.jpg
I tried posting using XHTML to no avail.
-
23.
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 ;)
-
24.
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.
-
25.
Apparently WordPress is stripping out my code. The missing text in brackets, that is causing the failed validation, is and ‘li’ tag.
-
26.
Guy: fixed that, thx for noticing! (I had just updated that widget ;) )
-
27.
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!
-
28.
-
29.
-
30.
It’s very good design! Well done, and good CSS coding skills!
-
31.
-
01.
TAG CLOUD
acid3
advanced layout
advanced layout module
background
border
Browsers
color
css
CSS3.info
CSS WG
csswg
developer tools
disabled
enabled
Feedback
firefox
firefox 3.1
fonts
generated content
grid positioning
hixie
HSLA
HTML5
ie6
ie7
ie8
jina bolton
jquery
media player
News
Opera
Opera Dragonfly
presentations
RGBA
safari
Selectors
slides
SVG
text rendering
W3C
wasp
Web Fonts
webkit
windows
Leave a Comment