Stretching the limits of CSS 3: Amazing creations in pure CSS

I once made a moderately interactive widget using pure CSS, and it was a relatively interesting experience. The widget itself had buttons that let you choose several parameters (about 400 combinations overall) and would render out a 'demo' of our product.

Some stuff I learned: 1. Most of css3 is supported in IE8, so we felt fine with using the widget in production.

2. With any reasonable LESS / SASS syntax, it's easy to generate complex stuff so long as it's limited to a discrete number of states. Stuff like tic-tac-toe are easily doable if you treat them as a state-machine.

3. It's way faster than JS, and there's a good reason for it. CSS can be totally figured out in one round of parsing, and so long as no JS is used to change it, the same parsed state can be used for all of your states. Even though it adds tens of kilobytes to the file size of both CSS and HTML, it's still faster than executing code.

This definitely isn't the right solution for all problems, but I think it's important to think about whether you problem can be solved in pure CSS, and to strongly prefer it for static sites and nearly-static sites.

Of course, kudos to the developers who are able to do this. It must be a lot of hard work, and there's no way I could do it.

But for me personally, creating something like this, with no constraints on performance, filesize, compatibility, etc, is no more amazing than building a massive website (like say bbc.co.uk) that renders perfectly, almost instantly, across many different devices.

This reminds me of my attempt to reproduce the Donkey Kong handheld video game using just HTML and CSS.

http://kong.詹姆斯.com/

I also wrote a short blog post describing some of the mechanics of the build for those that find that sort of thing interesting.

http://www.詹姆斯.com/blog/2016/07/html-kong

I once made a CSS-only Todo List[1] that demonstrated chaining sibling selectors, using the :checked psuedo selector, CSS counters and some other things to "enhance" a Todo without using JS (technically JS is used in a Jade template to compile the necessary HTML and CSS). CSS is pretty powerful.

1: http://codepen.io/scryptonite/pen/oLGzdj?editors=1000

First off, the work is awesome, don't get me wrong, but I'm a bit disappointed. From the title, I expect the examples to be written "Pure CSS, yet many examples, including the very first, are laden with HTML and JavaScript.

It's amazing what you can achieve just by using HTML and CSS, but still I wonder why we mostly see websites with generic design and layout that only use common HTML and CSS elements.

Seems to be down at The moment :(.

Please use some caching solution to avoid your web host from shutting your site in cases like this.

the last link (Star Wars opening crawl) should be https://codepen.io/TimPietrusky/pen/eHGfj

We broke the site it looks like. Sorry buddy, and you're welcome ;)

when I tried to look at the CSS tab for the MonaLisa that Browser tab froze (chrome).

How many box-shadows is it using?