Rob had himself a bit of a CSS compo a few weeks ago which I couldn’t resist. Here was the brief:
The idea I have is this: make the page easy to read, well-styled, efficient and reproducable. It’s up to you if you use graphics or not, if you use boxes or not. Just make it Good. Some rules do apply, and they make this the challenge it is: use a maximum of three images (read that correctly, please: three image files), make it work in modern web browsers (IE6 support would be nice, but it’s not a requirement) and go wild on the CSS3 you know. The funkier the better.
So Rob did the markup and we were to style it. I have to say I thoroughly enjoyed it and the judges had the dubious taste of awarding me a joint runners-up spot. The winner was a thoroughly impressive entry from Terry. A deserved winner, it pushed mine and Faruk’s entries into joint runners up.
In the interests of shameless ego-growth here’s what Jeff had to say about my entry:
In his entry, Kevin comes out swinging with some crafty CSS, a nice three column layout, and a lot of orange (and who doesn’t love orange?!). I especially like the navigation, which is flexbile in width can looks nice no matter how wide it gets. The use of auto-generation content with the after pseudo-class to create a chevron on hover is a nice touch, as well. I was especially impressed with the way Kevin dealt with the blockquote. He uses attribute selectors in combination with the after pseudo-class and content generation to put the referenced URL neatly beneath the quote. Lovely. It’s too bad it can’t be a link, but I don’t believe this would be possible without bringing javascript into the equation. Although it is most certainly a hack, and not something I’d recommend doing in the real world, Kevin also come up with a very creative solution for the main header of the page. Rob had the entire header, “Funkin’ with CSS. Using CSS to the max†wrapped in an h1, but Kevin wanted to use the two sentences separately. In order to do this, he hid the actual h1 in the background (by making it the same color) and used auto-content generation to add one sentence before the header and one after. Again, this is definitely not the ideal solution (ideally you’d put a span in the h1 or use image replacement), but it shows great ingenuity in dealing with the restriction of not being able to modify the XHTML markup. Crafty!
So, many thanks to Rob and Jeff and deserved congrats to Terry and Faruk.
Left Brain Right Brain 
Well done, nice one Kev
Looks good Kev… love those auto-generation hacks.
It’s interesting you’ve just posted about this Kevin – because I was recently making myself familiar with the winning entries when I came across some links to them from Faruk’s site.
I think the use of ‘comment’ in the CSS is one of the more noteworthy things for me – as I hadn’t seen that before. I spotted it and I was thinking: “What the hell is that?!” (And then frantically took notes!)
It was a groovy little competition that I wasn’t able to indulge in at the time cos I was too busy with other stuff…..(maybe next time eh?)
By the way Kevin: I’ve replaced the URL on my comment from my Preople blog to my actual site – you’re welcome to have a look – although there’s not much there just yet. And I’ve got a new e-mail address with Gmail that I’ve featured in the comments form too. 🙂
Matt
Cheers guys – I’ll go have a look in a bit Mat :o)
I think the use of ‘comment’ in the CSS is one of the more noteworthy things for me – as I hadn’t seen that before. I spotted it and I was thinking: “What the hell is that?!†(And then frantically took notes!)
Same here, but then it doesn’t work in IE, saviour of the lazy