Alternative URL for if the site has trouble keeping up: https://benjaminaster.github.io/CSS-Minecraft/
CSS Minecraft
71–80 of 154 posts
Re: CSS Minecraft
#72This is fiendishly clever, and really quite elegant. I made some of my own notes on how this works here: https://simonwillison.net/2025/May/26/css-minecraft/
But highly impractical and far beyond what CSS should be used for.
Re: CSS Minecraft
#73Please tell me if I understood it correctly: It implements voxels via . Each of the faces of each voxel is configured via 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 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 s wi…
Note: the tag does not use and does not need a closing slash and never has in any HTML specification.
https://html.spec.whatwg.org/dev/input.html#the-input-elemen...
Re: CSS Minecraft
#74Web-based minecraft, when?
The full java version of the game was ported to webassembly/webgl a while ago. It's called eaglercraft: https://eaglercraft.com
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.)
Re: CSS Minecraft
#75Without a doubt the most impressive thing I've seen with CSS. This 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/
poring over it or pouring your attention :)
Re: CSS Minecraft
#76Without a doubt the most impressive thing I've seen with CSS. This 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/
this is my favorite one one I've seen: https://lyra.horse/css-clicker/
Re: CSS Minecraft
#77I wonder when AIs can write clever codes like this. Given a surprising constraint.
Re: CSS Minecraft
#78Very nice work :) especially that you even support building sideways and the "hover" always is perfectly placed. Thats something that amazes me the most how clean it feels to place a block. Very good job!
Re: CSS Minecraft
#79Please tell me if I understood it correctly: It implements voxels via . Each of the faces of each voxel is configured via 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 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 s wi…
Note: the tag does not use and does not need a closing slash and never has in any HTML specification. https://html.spec.whatwg.org/dev/input.html#the-input-elemen...
It's sometimes done to make the same markup compatible with XHTML, without harming its interpretation in HTML.
Re: CSS Minecraft
#80Earlier quoted context omitted.
The full java version of the game was ported to webassembly/webgl a while ago. It's called eaglercraft: https://eaglercraft.com
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.)
Minecraft these days is missing a lot of what people would consider "Minecraft" 8 years ago.