I don't think any on the first page are interactive. There might be a few on the next page of it (I only found one where a pen changes color on hover).
Similar problems on my MBP, actually – just sans crashed tab. Zooming in and scrolling around on Chrome and Safari cause the divs to rerender (repaint?) and often not all of them even do! E.g. Chrome: https://imgur.com/a/VWCAL9G
Incredible. I was so skeptical that I went in on the neckruff and from there to a lacetop, it's really all generated based on background-image but without using images but gradients of specific colors, as well as box-shadows and the like.
> For the best performance, please close other tabs and running programs.
This has always been the case with CSS, hasn't it? When you use it for rendering something relatively complex, you're kinda doomed.
I get the dream, we want everything to be declarative, and leave room for future optimizations, so that we can write once and run everywhere forever.
But in practice, it's not really an improvement over traditional GUIs that let you draw directly. Hence CSS is literally adding draw[1].
This is a huge reason 90s.dev doesn't use HTML/CSS but starts from scratch and lets you draw right into WebGL2 yourself, or with high-level APIs if you want.
> When you use it for rendering something relatively complex, you're kinda doomed.
Can you describe a time that happened to you, and why you felt doomed?
That doesn’t like something that a person who has really used CSS in any meaningful way would say. Sharp edges, sure, but what technology doesn’t have that?
The game https://corru.observer/ is a great example of a CSS-rendered 3D video game that runs fairly well on modern devices (even playable on mobile although it'll try to block you based on viewport size if you're not in "desktop mode")
If anyone's wondering how it manages the state, a quick peek into the source code shows that it uses radiobuttons and the HTML contains all the blocks you could ever possibly place.
I... you're right. I was wondering why the world was only 9x9x9, there's 46k lines showing each block can have air, stone, grass, dirt, log, wood, leaves, or glass.
If anyone is equally curious how the camera state works, it looks like the camera is controlled by running animations when a button is in its :active state and pausing them otherwise.
Radio buttons and checkboxes really are magic when it comes to doing neat things in pure CSS. We used to have a lot of neat stuff like pure html/css tabs and toggles but they didn't pass an accessibility audit.
I've found less ambiguity to be a better thing than not, where possible. Self-closing a tag that can't contain anything is one such example of removing ambiguity for "hobbyists".
One would need to know the tag is self-closing in order to put the closing slash in. Right? So if one knows it's self-closing already, why do they need to add the extra weight?
Makes no sense.
If one wants to add content to a self-closing element, one has far more problems than we're talking about here.
It can be done by libraries, for example, which want their output to be valid in both HTML and XHTML.
Note that's it's not a syntax error in HTML - because HTML doesn't have syntax errors. The HTML5 spec tried to codify all the weird Postel's law quirks of existing HTML4 parsers, and in this case, tells you how to ignore the extra / if you're a parser. Nothing is a syntax error.
I didn't say it's a syntax error. I said it is not specified in the standard. You can put the slash there but it has no meaning, it does nothing, and browsers ignore it. If anything, it can cause problems: https://github.com/validator/validator/wiki/Markup-%C2%BB-Vo...
So it's best to not do it altogether. If one thinks they need to be compliant with both HTML and XHTML, I'd bet they have far more problems with the rest of their markup that would fail at such an effort.
I think at some point the number of tabs doesn't matter because the tab is unloaded and the state is maybe stored on disk. As long as you don't open them, having them open shouldn't slow the browser down.
Pretty slick! I never had played minecraft before. I never knew how blocks were place down until I ran this page. But it needs to be able to use the mouse to rotate, and mouse-wheel to scale!
When playing the actual game, your viewpoint moves with the character, moved by the WASD keys and oriented with the mouse. You can only ever place one block at a time, though.
I was confused because I thought Minecraft was originally Java, but that is Javascript. Wikipedia explains:
>On 7 May, 2019, coinciding with Minecraft's 10th anniversary, a JavaScript recreation of an old 2009 Java Edition build named Minecraft Classic was made available to play online for free.
The full game was available on minecraft.net for many years. At times it was the only way to play multiplayer when the authentication server would go down.
Fun fact: one of the first versions of Minecraft (the "classic" one) was playable in a web browser. I actually did play it as a young teen and later thought I must have dreamt it, when I couldn't find it anywhere.
Only guessing, but I have a theory that Mojang considered that circa 2017 :D
In 2019 they released a web version of minecraft classic, as a quirky marketing thing for the game's anniversary. But what they released turned out to be built on my open-source voxel engine, and when I dug around their code I realized they'd yoinked my engine a solid two years earlier.
And the demo they released was probably not two year's of work, so my theory is that somebody at Mojang investigated the idea of minecraft-but-JS, and made a demo but then decided not to pursue it, and then later on it got recycled for the marketing demo. (which, annoyingly for me, they pretended was an old alpha build of Minecraft instead of a new thing built on open source.)
The demo is still live, though the multiplayer stopped working the same day it launched:
Humorous postscript, btw: two months after Mojang forked my voxel engine, somebody left an anonymous "this is awful, you are a terrible programmer" comment on the engine repo.
It's probably a total coincidence, but I like to imagine that the comment came from somebody at Mojang, and that my awful code is the reason why minecraft isn't a web app today :D
Minor nit - "the full java version of an at-least 8 years old release" (which is necessarily missing -a lot- of what people would consider "Minecraft" these days.)
I don't get it - isn't this blatant copyright infringement? Seems like they're just running some kind of cracked Minecraft build with a JVM-in-JS layer or some such trickery?
As I've hit my mid-life slide and (regressed|progressed) back to my youth-self, I've found myself just writing a bunch of apps and sites in html and css and really enjoying it.
One thing I still would like to see cracked is a random-like number in pure CSS. You can almost us there with some of the math functions and browser attributes, but I haven't found anything reliable.
Can they? I think it's weird that you ask a question (or, offer a possible solution in the shape of a question) without verifying your own assertion first.
To answer your question, LLMs confirm you can't generate a random number in CSS.
alas, it seems that just shouting "AI" at problems is the latest trend in people who don't build software acting as though they know how building software works.
Interesting! I'm not familiar with this approach and look forward to trying it. Do you think it can be used to set a var that can be used for generative colors?
My point is that there will be too many who will look at this and start using CSS in ways it is not intended. Even today, far too many people attempt to use CSS for things best left for SVG.
These sorts of CSS experiments have been around for as long as CSS. There even used to be a site where an entire community would take basic markup and use CSS to turn it into something else.
(I just googled that phrase - the site is CSS Zen Garden. It’s impressive Google found it because that was a bad search.)
Some people did create monstrosities, others learned the limits of CSS and used that knowledge to advance CSS. So my point is that I believe in the ability of people to advance through discovering all the things they shouldn’t do.
CSS Zen Garden is not an experiment as shown in the title of this post. The Garden shows how CSS can style the HTML elements in many different ways but it is not there to create or manipulate images as shown in the subject of this post.
That said, I have not looked at the Garden in many years so if you fine one, then you found .... one ... and I loop back to my original comment: that such things are impractical, it's not what CSS is for, and should be avoided.
In other words, you don’t learn through experimentation and your learning style is the only valid one? Okay…this isn’t worth debating but science has proven that to be wrong.
CSS Minecraft, or CSS CAPTCHAs, or sign up / login modals cannot be done via SVG. This is needed for JS-less websites (e.g. Tor). CSS with HTML is perfect for this use-case.
If anything these tricks enable people to build stuff without JS.
I'm still here waiting for someone at W3C to get their stuff together and provide a spec for something that could enable an accessible hamburger menu with plain HTML + CSS.
Or a sane details element that DOES NOT REQUIRE JS TO CHANGE STATE (without interaction). Jesus.
Truly incredible from an HTML perspective, but I think also a testament to how catchy and simple Minecraft is as a concept... a few minutes of noodling around in here and I already built myself a cute little tree and a hill: https://i.imgur.com/PjlDWo5.png
Just think about setting what Minecraft has achieved as requirements from the get go: 1) Be one of the most successful games ever created. 2) Basic game mechanics should be possible to be implemented via just HTML and CSS (no JS).
I really like doing this when something extraordinary happens by "accident".
153 comments
[ 3.1 ms ] story [ 204 ms ] threadThis immediately brought "A Single Div"[0] to mind, which stood as the coolest CSS demo I'd seen for... 11 years!
This one takes the cake. I'll be pouring over it. Thanks!
[0]: https://a.singlediv.com/
Scrolling is fine in Firefox but extremely slow.
https://lynnandtonic.com/work/
Also love seeing Phoenix devs mentioned!
https://lynnandtonic.com/archive/
Got this bookmarked to click around for inspiration in my free time.
This has always been the case with CSS, hasn't it? When you use it for rendering something relatively complex, you're kinda doomed.
I get the dream, we want everything to be declarative, and leave room for future optimizations, so that we can write once and run everywhere forever.
But in practice, it's not really an improvement over traditional GUIs that let you draw directly. Hence CSS is literally adding draw[1].
This is a huge reason 90s.dev doesn't use HTML/CSS but starts from scratch and lets you draw right into WebGL2 yourself, or with high-level APIs if you want.
[1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
Can you describe a time that happened to you, and why you felt doomed?
That doesn’t like something that a person who has really used CSS in any meaningful way would say. Sharp edges, sure, but what technology doesn’t have that?
Shill for my app? I don't even know what shill means.
Plug for my app? Not really. It's pretty much dead atp. I'm just discussing my own experiences with the topic in the thread.
But yes, please downvote me. It helps remind me that this place isn't for me.
I kind of like it.
It implements voxels via <input type="radio" />.
Each of the faces of each voxel is configured via <label>s, one for each face having a different CSS class.
There is a voxel for each type of block (dirt, grass, stone, etc) and only one is activated at a time.
The <input>s are arranged in a 9x9 grid 10 blocks tall times the number of different types of blocks (about 6500 total).
All that is enclosed with <div>s with CSS classes that respond to the camera navigation (look up/down, move up/down, forward/back, clockwise/counter)
That is brilliant!
https://html.spec.whatwg.org/dev/input.html#the-input-elemen...
Ambiguity can be a dangerous thing, and not closing HTML tags can be a cause of that in my experience.
There are other terms but I won't list them here.
I've found less ambiguity to be a better thing than not, where possible. Self-closing a tag that can't contain anything is one such example of removing ambiguity for "hobbyists".
Makes no sense.
If one wants to add content to a self-closing element, one has far more problems than we're talking about here.
Yes.
Note that's it's not a syntax error in HTML - because HTML doesn't have syntax errors. The HTML5 spec tried to codify all the weird Postel's law quirks of existing HTML4 parsers, and in this case, tells you how to ignore the extra / if you're a parser. Nothing is a syntax error.
So it's best to not do it altogether. If one thinks they need to be compliant with both HTML and XHTML, I'd bet they have far more problems with the rest of their markup that would fail at such an effort.
>On 7 May, 2019, coinciding with Minecraft's 10th anniversary, a JavaScript recreation of an old 2009 Java Edition build named Minecraft Classic was made available to play online for free.
https://en.wikipedia.org/wiki/Minecraft
In 2019 they released a web version of minecraft classic, as a quirky marketing thing for the game's anniversary. But what they released turned out to be built on my open-source voxel engine, and when I dug around their code I realized they'd yoinked my engine a solid two years earlier.
And the demo they released was probably not two year's of work, so my theory is that somebody at Mojang investigated the idea of minecraft-but-JS, and made a demo but then decided not to pursue it, and then later on it got recycled for the marketing demo. (which, annoyingly for me, they pretended was an old alpha build of Minecraft instead of a new thing built on open source.)
The demo is still live, though the multiplayer stopped working the same day it launched:
https://classic.minecraft.net/
It's probably a total coincidence, but I like to imagine that the comment came from somebody at Mojang, and that my awful code is the reason why minecraft isn't a web app today :D
https://github.com/fenomas/noa
... and 46,022 lines of HTML (3.07MB)
As I've hit my mid-life slide and (regressed|progressed) back to my youth-self, I've found myself just writing a bunch of apps and sites in html and css and really enjoying it.
One thing I still would like to see cracked is a random-like number in pure CSS. You can almost us there with some of the math functions and browser attributes, but I haven't found anything reliable.
To answer your question, LLMs confirm you can't generate a random number in CSS.
I made some of my own notes on how this works here: https://simonwillison.net/2025/May/26/css-minecraft/
That's why it was done
For fun and to see whether it could be done
(I just googled that phrase - the site is CSS Zen Garden. It’s impressive Google found it because that was a bad search.)
Some people did create monstrosities, others learned the limits of CSS and used that knowledge to advance CSS. So my point is that I believe in the ability of people to advance through discovering all the things they shouldn’t do.
That said, I have not looked at the Garden in many years so if you fine one, then you found .... one ... and I loop back to my original comment: that such things are impractical, it's not what CSS is for, and should be avoided.
It may be worth reading some cognitive psych.
I'm still here waiting for someone at W3C to get their stuff together and provide a spec for something that could enable an accessible hamburger menu with plain HTML + CSS.
Or a sane details element that DOES NOT REQUIRE JS TO CHANGE STATE (without interaction). Jesus.
https://news.ycombinator.com/item?id=33579407
Concatenating strings is not that complicated.
I really like doing this when something extraordinary happens by "accident".