TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

CSS Minecraft

1220 点作者 mudkipdev11 天前

41 条评论

globie11 天前
Without a doubt the most impressive thing I&#x27;ve seen with CSS.<p>This immediately brought &quot;A Single Div&quot;[0] to mind, which stood as the coolest CSS demo I&#x27;d seen for... 11 years!<p>This one takes the cake. I&#x27;ll be pouring over it. Thanks!<p>[0]: <a href="https:&#x2F;&#x2F;a.singlediv.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;a.singlediv.com&#x2F;</a>
评论 #44103188 未加载
评论 #44104863 未加载
评论 #44109351 未加载
评论 #44102444 未加载
评论 #44104774 未加载
评论 #44107002 未加载
benjaminaster10 天前
Hello people, author here!<p>Some comments on this from my side:<p>- You people totally overwhelmed my website... I use(d) Firebase static hosting because it&#x27;s completely free and super simple, which reached the 10 GB monthly limit now. I changed to Cloudflare in the meantime, but it&#x27;ll need some time for the DNS records to update. IN THE MEANTIME, PLEASE USE THE GITHUB PAGES LINK INSTEAD: <a href="https:&#x2F;&#x2F;benjaminaster.github.io&#x2F;CSS-Minecraft&#x2F;" rel="nofollow">https:&#x2F;&#x2F;benjaminaster.github.io&#x2F;CSS-Minecraft&#x2F;</a><p>- I made this almost three years ago now, to try out the limits of what&#x27;s possible with pure CSS, and to test out the then-new CSS :has() selector.<p>- This project never got much traction until now, so I never bothered to write about how it works. Simon Willison now already wrote a blog post about it, so I guess I don&#x27;t have to anymore... <a href="https:&#x2F;&#x2F;simonwillison.net&#x2F;2025&#x2F;May&#x2F;26&#x2F;css-minecraft&#x2F;" rel="nofollow">https:&#x2F;&#x2F;simonwillison.net&#x2F;2025&#x2F;May&#x2F;26&#x2F;css-minecraft&#x2F;</a><p>- For the best experience, please view this on a desktop browser, either Chromium-based or Firefox.<p>- The source code is at <a href="https:&#x2F;&#x2F;github.com&#x2F;BenjaminAster&#x2F;CSS-Minecraft">https:&#x2F;&#x2F;github.com&#x2F;BenjaminAster&#x2F;CSS-Minecraft</a>. The &quot;index.pug&quot; and &quot;main.scss&quot; files contain the actual source code; the rest is mostly just the compiled output.<p>- Here is a video of me building a house with it: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=OH8-Y9frP5k" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=OH8-Y9frP5k</a>
评论 #44112452 未加载
simonw11 天前
This is <i>fiendishly</i> clever, and really quite elegant.<p>I made some of my own notes on how this works here: <a href="https:&#x2F;&#x2F;simonwillison.net&#x2F;2025&#x2F;May&#x2F;26&#x2F;css-minecraft&#x2F;" rel="nofollow">https:&#x2F;&#x2F;simonwillison.net&#x2F;2025&#x2F;May&#x2F;26&#x2F;css-minecraft&#x2F;</a>
评论 #44105579 未加载
评论 #44103543 未加载
评论 #44106371 未加载
评论 #44109559 未加载
评论 #44104667 未加载
skulk11 天前
If anyone&#x27;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.
评论 #44101869 未加载
评论 #44101733 未加载
评论 #44105483 未加载
评论 #44101743 未加载
评论 #44106441 未加载
noman-land11 天前
Incredibly brilliant. Seems to have gone completely unnoticed 2.5 years ago.<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33579407">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33579407</a>
评论 #44107490 未加载
avestura10 天前
Another hug of death. The website says &quot;It must be upgraded via the Firebase console before it can begin serving traffic again.&quot;<p>Wayback machine for when it used to work: <a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20250317122419&#x2F;https:&#x2F;&#x2F;benjaminaster.com&#x2F;css-minecraft" rel="nofollow">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20250317122419&#x2F;https:&#x2F;&#x2F;benjamina...</a>
评论 #44109527 未加载
frozenlettuce10 天前
Best anti-firebase post I&#x27;ve ever seen
评论 #44107438 未加载
评论 #44108496 未加载
评论 #44109049 未加载
simonw11 天前
Alternative URL for if the site has trouble keeping up: <a href="https:&#x2F;&#x2F;benjaminaster.github.io&#x2F;CSS-Minecraft&#x2F;" rel="nofollow">https:&#x2F;&#x2F;benjaminaster.github.io&#x2F;CSS-Minecraft&#x2F;</a>
bradly11 天前
Very impressive!<p>As I&#x27;ve hit my mid-life slide and (regressed|progressed) back to my youth-self, I&#x27;ve found myself just writing a bunch of apps and sites in html and css and really enjoying it.<p>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&#x27;t found anything reliable.
评论 #44105487 未加载
评论 #44120203 未加载
评论 #44104400 未加载
nightpool11 天前
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: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;PjlDWo5.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;PjlDWo5.png</a>
评论 #44104408 未加载
ElCapitanMarkla11 天前
Reminds me of a couple of Keith Clark&#x27;s projects from a good 10+ years back<p><a href="https:&#x2F;&#x2F;keithclark.co.uk&#x2F;labs&#x2F;css-fps&#x2F;desktop&#x2F;" rel="nofollow">https:&#x2F;&#x2F;keithclark.co.uk&#x2F;labs&#x2F;css-fps&#x2F;desktop&#x2F;</a><p><a href="https:&#x2F;&#x2F;keithclark.co.uk&#x2F;labs&#x2F;css-3d-shadows&#x2F;" rel="nofollow">https:&#x2F;&#x2F;keithclark.co.uk&#x2F;labs&#x2F;css-3d-shadows&#x2F;</a>
Kholin11 天前
It&#x27;s absolutely brilliant how rotation and movement control is achieved by changing the animation-play-state value using the :active pseudo-class on button elements.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;BenjaminAster&#x2F;CSS-Minecraft&#x2F;blob&#x2F;main&#x2F;main.css#L249-L272">https:&#x2F;&#x2F;github.com&#x2F;BenjaminAster&#x2F;CSS-Minecraft&#x2F;blob&#x2F;main&#x2F;mai...</a>
kapildev11 天前
I got &quot;Bandwidth Quota Exceeded&quot;
评论 #44107049 未加载
评论 #44106455 未加载
评论 #44106531 未加载
low_tech_punk11 天前
Pug is an unsung hero in this demo. The template engine made it possible to brute force the UI with 4 levels of nested loop. Impressive!
评论 #44106185 未加载
simonw11 天前
And it&#x27;s only 480 lines of CSS! <a href="https:&#x2F;&#x2F;github.com&#x2F;BenjaminAster&#x2F;CSS-Minecraft&#x2F;blob&#x2F;main&#x2F;main.css">https:&#x2F;&#x2F;github.com&#x2F;BenjaminAster&#x2F;CSS-Minecraft&#x2F;blob&#x2F;main&#x2F;mai...</a><p>... and 46,022 lines of HTML (3.07MB)
akomtu11 天前
Recently I came across Quake implemented within a single WebGL shader (<a href="https:&#x2F;&#x2F;www.shadertoy.com&#x2F;view&#x2F;lsKfWd" rel="nofollow">https:&#x2F;&#x2F;www.shadertoy.com&#x2F;view&#x2F;lsKfWd</a>), but this is another level. HTML&#x2F;CSS is a programming language now.
评论 #44106136 未加载
felineflock11 天前
Please tell me if I understood it correctly:<p>It implements voxels via &lt;input type=&quot;radio&quot; &#x2F;&gt;.<p>Each of the faces of each voxel is configured via &lt;label&gt;s, one for each face having a different CSS class.<p>There is a voxel for each type of block (dirt, grass, stone, etc) and only one is activated at a time.<p>The &lt;input&gt;s are arranged in a 9x9 grid 10 blocks tall times the number of different types of blocks (about 6500 total).<p>All that is enclosed with &lt;div&gt;s with CSS classes that respond to the camera navigation (look up&#x2F;down, move up&#x2F;down, forward&#x2F;back, clockwise&#x2F;counter)<p>That is brilliant!
评论 #44104683 未加载
taosx11 天前
Blew my mind. I have hundreds of tabs open, no issue on linux chrome.
评论 #44101866 未加载
Shemetz11 天前
Another impressive CSS creation -- CSS Puzzle Box: <a href="https:&#x2F;&#x2F;suricrasia.online&#x2F;puzzlebox&#x2F;" rel="nofollow">https:&#x2F;&#x2F;suricrasia.online&#x2F;puzzlebox&#x2F;</a>
khurdula11 天前
Damn, just visiting this site makes me want to reinstall Minecraft haha.
DirkH9 天前
Did anyone else involuntarily let out multiple expletives when they saw it and it dawned on them how hard this must have been?<p>This is insane to me.
ddtaylor11 天前
I remember discovering this trick nearly two decades ago. A co-worker and myself were a bit puzzled at the time and we kind of tossed the idea in the air that &quot;doesn&#x27;t this mean CSS is Turing Complete?&quot; but we moved on to making things work on IE6 for old clients.
ForOldHack10 天前
<a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20250317122419&#x2F;https:&#x2F;&#x2F;benjaminaster.com&#x2F;css-minecraft&#x2F;" rel="nofollow">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20250317122419&#x2F;https:&#x2F;&#x2F;benjamina...</a>
secondbrain_io10 天前
I also got &quot;Bandwidth Quota Exceeded&quot;. Seems like you&#x27;re doing well!
voodooEntity11 天前
Very nice work :) especially that you even support building sideways and the &quot;hover&quot; always is perfectly placed. Thats something that amazes me the most how clean it feels to place a block. Very good job!
quantadev11 天前
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!
评论 #44103435 未加载
perdomon10 天前
My one regret in life is not having seen this before your Firebase credits were spent for the month. Looking forward to a June attempt!
评论 #44110248 未加载
justinde11 天前
Web-based minecraft, when?
评论 #44102986 未加载
评论 #44102351 未加载
评论 #44103769 未加载
评论 #44102355 未加载
评论 #44102364 未加载
评论 #44104245 未加载
cod3rboy11 天前
This is breathtaking and embodiment of creativity. Truly a legend!
zizomod11 天前
Doing this art just with css ,you are greatest one in css sir.
sefke11 天前
Damn, this is impressive.
h1fra11 天前
Very impressive
kkkkkkmm9 天前
Chuối
dylanhouli11 天前
Mind blowing
anil_gr11 天前
Brilliant !
kazarka11 天前
Gj
bpiroman11 天前
that&#x27;s amazing!!!
zizomod11 天前
That&#x27;s crazy
ryanisnan11 天前
Well done!
est11 天前
I wonder when AIs can write clever codes like this. Given a surprising constraint.
评论 #44106133 未加载
90s_dev11 天前
&gt; For the best performance, please close other tabs and running programs.<p>This has always been the case with CSS, hasn&#x27;t it? When you use it for rendering something relatively complex, you&#x27;re kinda doomed.<p>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.<p>But in practice, it&#x27;s not really an improvement over traditional GUIs that let you draw directly. Hence CSS is literally adding draw[1].<p>This is a huge reason 90s.dev doesn&#x27;t use HTML&#x2F;CSS but starts from scratch and lets you draw right into WebGL2 yourself, or with high-level APIs <i>if</i> you want.<p>[1] <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;CSS_Painting_API" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;CSS_Paintin...</a>
评论 #44102451 未加载
评论 #44102844 未加载
评论 #44102748 未加载