设计与产品pattle.github.io
用 CSS 画《辛普森一家》
The Simpsons in CSS
2013 — 2020,它一次次回到首页
黑点是上首页(≥ 50 分)的那次投稿,空心点是没冲上去的投稿,点越大分数越高。
导读
这是一个用纯 CSS 绘制《辛普森一家》角色的趣味项目,作者 pattle 用 CSS 画出荷马、巴特等人物,并展示了如何像代码一样调整颜色等参数。项目多次登上 HN 首页,是 CSS 艺术的经典示例。
为什么经久不衰:它把 CSS 当作可编程的绘图媒介,展示了样式即代码、可实时改参数的独特魅力,至今仍是 CSS 能力的经典演示。
HN 评论精选
调侃社区连玩笑项目也认真提 bug
我喜欢的是,连这么无聊又无关紧要的东西,在 GitHub 上都有 13 个未关闭的 issue。
Nition查看英文原文
I love how even something as silly and unimportant as this has 13 open issue reports on GitHub.
回顾 CSS 兼容性从 Acid2 时代以来的巨大进步
CSS 艺术总让我想起当年的 Acid2 测试。我们一路走来已经进步太多了!
jtangelder查看英文原文
CSS art always reminds me to the acid tests, back in the old days. We come from far! https://en.wikipedia.org/wiki/Acid2
认为 CSS 画图只是玩具,实际应用应该用 SVG
别这样,为什么这是 HN 第一?直接用 SVG 就行了。几年前当个 demo 还挺好玩,但别在生产环境用这种技术……
jstsch查看英文原文
No, stop it. Why is this #1 on HN right now? Just use SVG. This was fun as a demo a couple of years ago, but don't use this technique in production folks...
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程,从基础概念一路讲到曲线求交、投影、曲率等进阶内容,并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示:在浏览器里实时渲染一片水面,展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议:永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议,主张在界面和绘画中改用深灰或带色相的暗色,并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开,探讨我们用来思考和表达复杂问题的媒介,以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验:团队做了一个更轻量的页面版本,起初从整体平均加载时间看反而更慢;按地理区域分层后才发现,轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com