“Wow, Mona Lisa with pure CSS!”

There has been a recent flood of CSS experiments that utilize CSS3 features to convert some meaningless markup to spectacular pictures. It all started when David Desandro used CSS3 to draw the Opera logo. This seemed to inspire lots of other folks who created similar demos:

I can certainly share their enthusiasm and I am also amazed by their results. Besides that, I think that pushing CSS3 to the edge like that, helps us understand the spec better, which leads us to find and file browser bugs or write comments regarding the spec itself. Filing bugs is crucial at this stage, with all browser vendors gradually adding experimental –and frequently buggy– CSS3 support to their products. Also, don’t get me wrong: I can easily see the benefits of reducing the number of images in a web application interface (far quicker/easier modifications, less HTTP requests and most of the time, less bandwidth).

However, I’m afraid we’re losing sight of the big picture. These aren’t demos that are or will ever be legitimate CSS use cases. Even after universal CSS3 browser support is achieved, they would (and should) still be considered “hacks”. Almost all the arguments pro their usage also apply to more suitable ways of including images in web applications:

  • Fewer HTTP requests: Same with any kind of embedded image (data URIs, inline SVG and so on)
  • Scalable: Same with SVG and symbols embedded in custom fonts
  • Easier to modify: Same with SVG
  • Less bandwidth (in some cases): Same with SVG (and it can be cached too, when not inline)
And apart from these, these illustrations require non-semantic crap to be included in the markup which, besides issues of theoretical purity, makes it harder for other people to use them.
As for the graceful degradation argument, yes, this does only apply to CSS “images”. But in this case, is it really an advantage? I seriously doubt it. People won’t notice rounded corners if they’re missing from an interface, but they’re definitely going to notice a blocky Opera logo. And they’re not used in thinking that their browser has something to do with how an image renders, so they’ll just blame the website.

CSS is supposed to enhance the presentation of a document or interface, not to be (ab)used for the creation of illustrations from scratch. It’s supposed to separate presentation from structure, not generate stuff. There are other technologies that are far more suitable for this (*cough*SVG*cough*). I think we should use our energy and creativity to make CSS3 demos that people will actually use in the future when all this is fully supported, not stuff doomed to be eternally considered hackery.

“Where should we draw the line?” one might ask. For example, is a Pure CSS analog clock a CSS abuse case? Or even my own CSS iPhone keyboard? Now that’s a good question! A rule of thumb seems to be “if it inherently (=not due to browser support issues) involves a bunch of empty (or with meaningless content) HTML elements, then that’s a bad sign” but that might be overly strict. What’s your take on it?

Disclaimer: Yes, I’m fully aware that most of the time, such experiments are created just for fun by their (very talented) authors, which are perfectly aware of all the things mentioned above. However, I’ve also grown tired of reading comments by people that seem to to think that “This is the future of the web!”. Let’s hope it’s not.

  • Pingback: “Wow, Mona Lisa with pure CSS!” « Lea Verou | My Blog()

  • http://pepelsbey.net/ Vadim Makeev

    > CSS3 Gradients coffee cup

    I guess my “Tea Cup” demo looks better 😉

    And a bunch of another beautiful “pure CSS” examples:

    • http://leaverou.me Lea Verou

      Philosophical considerations aside, your tea cup demo is fantastic!!

      Thanks for the Opera article too, some really good use cases there 🙂

  • http://mediaelements.in rajunix


    i wondered with pure css logos and keyboard………very nice……..great job………

  • http://www.zomigi.com Zoe Gillenwater

    You do realize, of course, that you’ve now given someone out there the idea of making the Mona Lisa in pure CSS, so it’s going to happen. Only a matter of time. 🙂

    • http://leaverou.me Lea Verou


  • David

    I agree. CSS3 is not the right tool to create images. It’s funny how some people just don’t get it. I appreciate the technical abilities shown in those experiments. But it’s just not the right tool. I suggest that they should use their time and skills wisely and produce experiments that actually demonstrate something that would be practical in the future.

  • http://ardianzzz.com ardianzzz

    Great resources, thanks

  • http://nicolasgallagher.com Nicolas Gallagher

    Not all examples use unsemantic HTML and some of us were playing around with this stuff before Desandro posted his CSS Opera logo ;). There have also been practical applications that have come from these experiments. But I agree with the overall point you’re making!

    • http://leaverou.me Lea Verou

      Hey Nicolas! Great to have you here! 🙂

      Yeah, I remember that you usually use quite semantic HTML for your demos, and that’s definitely a good thing. However, even in that case, I think that image replacement (with SVGs probably) would be more suited for social media icons for example, instead of all this CSS3 hackery (impressive as it may be, and it really is).

      By the way, I absolutely loved your CSS speech bubbles when I had stumbled upon them, kudos for that! They were awesome!

  • http://www.paulrhayes.com Paul Hayes

    I’ve just come across this article and thought I’d throw some more resources into the mix. In March 2009 I started a similar debate after creating a CSS clock:


  • http://None Carlos

    Just to tell you that you are not only talented, but beautiful !

  • http://www.sabdesign.co.uk Margot Alexader

    Have been looking at doing SEO and bettering the design on my site for a long time, so this post has been really useful. Easy read as well, so thanks!

  • Pingback: angara fahise()

  • Pingback: www.tradeonixbonuses.com/bonus-tutorial/()

  • Pingback: Term Life Insurance()

  • Pingback: anabolic steroids shop()

  • Pingback: Facebook Live()

  • Pingback: frive frive.link()

  • Pingback: blogspot()

  • Pingback: https://tribot.org()

  • Pingback: subway surf games()

  • Pingback: hampton bay online()

  • Pingback: frivgames.top/category/unblockedgames/()

  • Pingback: Bank Tracker Bot Review()

  • Pingback: Porte Per Garage()