Making chocolate teapots / Daniel Eden

CSS3 is pretty damn cool. I’ve said that a lot, and I can’t see that opinion changing any time soon. With CSS3, we can create effects previously only attainable through image manipulation, generation, and Adobe Flash player. With the advent of these CSS properties came a slew of curious designers, pushing the capabilities of these properties beyond their original scope.

I’m all for experimentation, but some of these experiments are getting a bit silly. Not too long ago, I came across a shot on Dribbble which I really liked. I’m a big fan of animation, especially stuff that shows a high level of care — the change in shape at the peaks of the bounce, the shadow depth variation — it’s all rather fancy. Then I thought to myself “I wonder how close I can get to this in CSS?” and whipped up this little number. The ball is an img element since, well, it’s an image. The shadow is a separate element, and I admit that isn’t ideal — but it’s as minimal as I could get the markup to go. Not too bad. Then, I was tweeted by someone not too long afterwards who had managed to make the whole thing in CSS — the ball and everything. Here’s where it starts to go wrong.

It’s really cool that you can create complex shapes with CSS with relative ease. What’s not so cool is all the extra markup involved. Instead of just two elements, like my own interpretation of the shot, this CSS only experiment used a total of 5 HTML elements, and considerably more CSS. It’s a little bit like making a chocolate teapot — it’s impressive, for sure, but really? That’s not going to work.

Another example that springs to mind is this CSS only iPhone 4. Once again, it’s really very cool. But that’s about it. More than anything, you can kind of tell it’s all coded rather than images — in a not-very-good way. It has over 3 thousand lines of CSS. Three thousand lines of CSS. Not even fully-fledged websites have that much CSS, let alone a single page experiment. When I first saw it a month or so ago, I dismissed it as what it was — another pointless experiment pushing the boundaries of CSS beyond it’s actual purpose. But now it’s been doing the rounds again on Twitter and other networks, gaining traction and becoming super popular. People are getting seriously wowed by this chocolate teapot.

Another thing to remember is that images are code. People say CSS will always be faster because it’s written code rather than binary data, but with the right image compression, that’s not always the case. Heck, you can even use data URI’s in your CSS or HTML to load images straight away without additional HTTP requests.

I’m no saint myself — I’ve made an awful lot of CSS experiments in my time, but I’ve recently come to understand something — if your “experiment” requires more than one more element than the original technique (or, if your really strict, any additional elements) then it simply isn’t worth the effort. Let’s all stop gawking at the extreme possibilities and get back to making excellent, semantic, markup-friendly and less bloated websites.

Anonymous

Great post. I feel the same way about using stuff like Spinner.js for animated spinners on webpages. Sure, I guess you could do it with Javascript, but really, why would you? Just because it can be done with something doesn’t mean it should.
- http://daneden.me Dan Eden
  
  I suppose the benefit of Spinner.js is that it allows quick customization of a graphic that can be quite hard to generate manually. While I agree that an image would be more appropriate and have less of a strain on the client computer, I’m actually in favor of the tool
http://about.me/antoninjanuska Antonin Januska

I think the point of creating the more advanced CSS illustrations and animations to show what we CAN do with just a regular styling language, and to demonstrate how far we’ve come. I believe it’s rather counter productive to spend that much time and write that many lines for something like that.

If 3000 lines is something you’re worried about then I think you should consider the size of the 3000 lines against the size of the animation you created. Do they weigh out? I realize that perhaps processing through 3K lines will take more time than a 4kb image (or however big it is) and that’s something else to count into it.

I’m FOR using complex CSS but only when the size of the style is smaller and easier to modify than an image itself. I wrote an article about it on tumblr discussing this very topic (http://tumblr.antjanus.com/post/14571709591/css3-advantages-over-images) . As far as logical usage of CSS over images, that’s where it goes: size of the css code + processing time + download time vs. size of the image + processing time + download time.

As far as these “chocolate teapots” go, that’s, I think, just for show rather than for actual usage. And if it is for usage, the only time I’d use such a complex css creation (like the iPhone) is if each of the coded parts required on-page modification ie. an on-page camera flash/zoom that would change a potential graphic, depression effect of the button with some color change, and so on.
- http://daneden.me Dan Eden
  
  True, a lot of these experiments will never see a real world project, but my greatest fear is that upcoming web designers will see them and think “Wow, this is great! I should put it in my website!”
  
  I also agree that there’s nothing wrong with a large amount of CSS if it’s justified in the result, but my main concern is the bloated and unnecessary markup that may be involved in the process.
Anonymous

Hi, I’m the guy who made the chocolate teapot.
I admit, the HTML isn’t really clean, but as you said — it’s not
- http://daneden.me Dan Eden
  
  Great job cutting it down! Much better.
  
  And I fixed the typo
http://twitter.com/iamlouisbullock Louis Bullock

We shouldn’t give up on images just yet, with the right amount of compression, and some gzipping, things turn out just dandy.
http://twitter.com/iamlouisbullock Louis Bullock

And what about CSS3 and HTML5 advertisements? Recently on Yahoo Answers I saw an ad that looked suspiciously as being purely code-created, and to my surprise it was, animations and all (well, not the images), but that got me thinking, would it be better to animate banners/ads with CSS3? Or stick to flash? What do you think Dan?
- http://daneden.me Dan Eden
  
  I’d like to think that the designers of HTML/CSS ads are responsible enough to use appropriate markup — i.e. images where images are needed, rather than silly markup to recreate them. But I think that HTML/CSS advertisements are definitely a great idea, more accessible and compatible than Flash.
Anonymous

“People say CSS will always be faster because it’s written code rather than binary data” of course if you’re drawing simple shapes, but sometimes rendering CSS3 will be extremely slower than showing an image, for example, if we consider an image and the CSS equivalent, where gradients and soft shadows are drawn, the image will probably load slower than the css data, but once loaded, CSS will be using much CPU and GPU load. With good compression, you can make things really beter with images.