
Stretching the limits of CSS 3: Amazing creations in pure CSS - henck
http://www.independent-software.com/stretching-the-limits-of-css-3-amazing-creations-in-pure-css/
======
noamyoungerm
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.

------
blowski
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.

~~~
jordache
Imagine a quadrant chart that plots the superlatives of web solutions. The bbc
sites resides in a different quadrant than these Css emphasized solutions...

~~~
blowski
Yeah, I understand that. These are like short but beautiful poems, where the
BBC website is like the Britannica Encyclopaedia.

But if there's someone who works on bbc.co.uk reading this, I salute you for
the amazing work you do, because you often don't get enough credit.

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

[http://kong.詹姆斯.com/](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](http://www.詹姆斯.com/blog/2016/07/html-kong)

------
Scryptonite
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](http://codepen.io/scryptonite/pen/oLGzdj?editors=1000)

------
johnhenry
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.

------
azazqadir
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.

~~~
jordache
Umm Compatibility reasons? It's probably also much easier to create certain
things using a full range of tools rather than trying to implement it purely
in css

~~~
throwanem
Also because commonality of user experience has great value in satisfying the
principle of least astonishment. It's true that a lot of web devs and
designers don't get this right, but that's no reason to suggest they shouldn't
be trying.

~~~
jordache
I think this work is valuable, but this is more R&D type work than a lot of
people who are actually producing work with immediate value results, and tied
to a business need

------
onnimonni
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.

~~~
blowski
It's a short blog post linking off to CodePen demos:

* [https://codepen.io/jaysalvat/pen/HaqBf](https://codepen.io/jaysalvat/pen/HaqBf)

* [https://codepen.io/juliangarnier/pen/idhuG](https://codepen.io/juliangarnier/pen/idhuG)

* [https://codepen.io/rgg/pen/QbRyOq](https://codepen.io/rgg/pen/QbRyOq)

* [https://codepen.io/rgg/pen/vlrnd](https://codepen.io/rgg/pen/vlrnd)

* [https://codepen.io/rgg/pen/eHGfj](https://codepen.io/rgg/pen/eHGfj)

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

~~~
henck
Fixed the link. Thanks man

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

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

How many box-shadows is it using?

~~~
henck
A whopping 7574 box-shadows.

