CSS3 is the New ASCII Art
I've seen some very interesting experimentation with illustrating with CSS3 which reminds me of the good old days of ASCII art. It's fun and interesting and takes an incredible amount of time and attention to detail. It's not practical, but it's fun. I've seen it on some production sites, even. To me, this is as bad as designing with Tables. Don't do it!
Illustrating with CSS3 is certainly creative, and a fun way to push the limits of what CSS3 can accomplish. It starts with creating sometimes dozens and dozens of divs and spans, creating any number of rounded corners, rotating the divs/spans, adding drop shadows, and presto! Scalable image that can't be seen on Internet Explorer. Here are some interesting examples: http://ping.fm/5coll http://ping.fm/ouEPW http://ping.fm/UGMwn
While I think its cool - it is - it goes against the whole purpose of CSS3 to start adding unnecessary markup to your code. HTML should be your content and CSS3 should style the content. Actual images should be seen as content (when it's icons, like the Opera logo example), or a background image, like in BeerCamp, to style the page. All those extra divs are NOT content, and should not be on the page.
The actual BeerCamp logo might actually be a perfect example of how one SHOULD use CSS3. It is text, and it can be read on all browsers. The dozen or so text-shadows used to give the 3D effect are style. A CSS-swapped image might have been easier, but this is cooler, and works even when you have images turned off. The city-scape, however, should not have been done as the myriad divs and spans as it was. Further, use of HTML5 elements is nice, but a bunch of empty spans to create windows are definitely not applicable to the "article" tag!
Clearly, the BeerCamp example took a pain-staking amount of work. Doing it in illustrator, however, and using a scalable SVG, would have resulted in a single image. Far better use of the designer's time, and much more semantically preferred.
Stay away from the urge to use CSS3 illustration on your website! It's as bad as designing with Tables, and I simply won't stand for it! :)
What do you all think? Progressive design style, or horrible misuse of CSS3?
Comments
strange... css3 use ;-)
However using the ::before, ::after ::outside pseudo classes doesn't add any markup to the page.
One example I use a lot is an info link. The round icon with the i inside it. I set my link to contain the word "info" and then hide that text and use CSS3 to create the icon using border-radius: 50%, font-family: georgia, content: "i", font-style: italic... Seems like a perfect use of CSS3 for a progressive enhancement. IE can still use the "info" text.
I do agree that adding more tags to your page isn't worth it however.
Hey Jordan, thanks for commenting.
You're totally correct - pseudo-classes which don't add markup and only add style are a perfect way to utilize CSS3. Your info link example is also great - the icon is the actual style of the link itself, rather than a construction of unneeded markup styled with CSS3 which offers no semantic meaning.
I agree that it goes against the whole purpose of CSS3 to use presentational markup in the way that many demos do.
I've relied on pseudo-elements (:before, :after) to produce icons, speech bubbles, borders, and backgrounds while retaining a semantic HTML base. Examples here.
The extension to pseudo-elements currently in the CSS3 Generated and Replaced Content Module would open the door to near limitless manipulations.
Coupled with CSS3 transforms, multiple backgrounds, borders, etc you could create highly complex presentations from a single element.
Sweet stuff, Nicolas! I think that's an excellent way to do it. The diagrams are really only visual fluff for the descriptions which make "illustrating" with CSS a good move. Thanks posting a link.
(If the diagrams were more complex, though, it might be argued they should be treated as content.)
Post new comment