:minetest: Minecraft Clone manages with Nothing but HTML + CSS.
True, this small clone is limited to playing with blocks in a world that measures only 9x9x9, but the fact that [Benjamin Aster] managed it at all using only CSS and pure HTML is a fantastic achievement. As far as proofs of concept go, it’s a pretty clever one.
https://benjaminaster.github.io/CSS-Minecraft/
#minecraft #clone #cssminecraft #gaming #engineer #artist #media #html #css #programming #art #tech #news
![⁉️Can a 3D Minecraft implementation be done entirely in CSS and HTML, without a single line of JavaScript in sight? The answer is yes! [Simon Willison] has a more in-depth analysis of CSS-Minecraft and how it works, and the code is on GitHub if you want a closer look.⁉️
<https://simonwillison.net/2025/May/26/css-minecraft/>
<https://github.com/BenjaminAster/CSS-Minecraft/tree/main?tab=readme-ov-file>](https://files.mastodon.social/cache/media_attachments/files/115/355/564/917/702/167/original/168ba699ad5ca0d3.jpeg)
![[ImageSource: Benjamin Aster]
The project consists of roughly 40,000 lines of HTML radio buttons and labels, combined with fewer than 500 lines of CSS where the real work is done. In a short thread on X [Benjamin] explains that each block in the 9x9x9 world is defined with the help of tens of thousands of <label> and <input type="radio"> elements to track block types and faces, and CSS uses that as a type of display filter. Clicking a block is clicking a label, and changing a block type [“air” or no block is considered a type of block] switches which labels are visible to the user.
👾Viewing in 3D is implemented via CSS animations which apply transforms to what is displayed. Clicking a control starts and stops the animation, resulting in a view change. It’s a lot of atypical functionality for plain HTML and CSS, showing what is possible with a bit of out-of-the-box thinking.👾](https://files.mastodon.social/cache/media_attachments/files/115/355/564/950/216/026/original/b4aba66c8b9126f5.jpeg)
