Ambient CSS v3:Blender と CSS の融合
Ambient CSS v3 – Blender meets CSS

Ambient CSS は、CSS に物理ベースのライティングを導入する実験的なライブラリです。v3 では、グローバルライトとカスタムライト、ライトの方向や高さの調整、バウンス、サーフェスの凹凸、マテリアル(マット、光沢、ガラス、ブラシ、スパン、ブラスト)、エッジ処理(面取り、フィレット、チャンネル)など、Blender のような機能を備えています。React コンポーネントも提供され、シーンはライブで再ライティングされます。
Ambient CSS は、CSS に物理ベースのライティングをもたらします。
HNでの議論
95- CSSer
dribbbleやenvato風のスタイルがなぜかClaudeから出てきて、今ではどこでも見かけるようになって、平凡なデザインレイアウトと混ざっているのが本当に嫌いです。こういうものがそれに対抗するのに役立つかもしれないと思う一方で、12pxのタイポグラフィ(kubernetesの3Dダッシュボード的なやつ)で使われているのを見ると、恐怖で後ずさりしてしまいます。これはPSAだと思ってください:Claudeは標準ではUXや優れたデザイン原則を理解していません。デザイナーにハグしに行ってください。
- graypegg
細かい指摘ですが、ベース平面を想定してパースペクティブを設定し、Z軸上でtranslate3dで上に移動すれば、浮き上がりはもっと理にかなうでしょう。要素のサイズも大きくなります。
とはいえ、変換されたDOMノードを扱うのは面倒かもしれませんが、「バウンス」の例で背景だけが動いているのが、私には奇妙に思えました。
また、テクスチャは単なるグラデーションか埋め込みテクスチャデータのようです。これは https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V... を使用して、Firefoxではグラデーションや既製画像にフォールバックすることを考えていました。
- alexaholic
Web 2.0時代には、PNGやGIF、`progid:DXImageTransform`を使ってこれをやっていました。当時は標準のCSSだけではできなかったからです。その後、CSS(そしてMSも!)が進化してそれが可能になると、世界はフラットUIに移行しました。皮肉ですよね?
- mminer237
面白いアイデアですが、作りが非常に雑に感じます。
光の方向がなぜかグリッド全体を支配しているのに、任意のdivの外で止まり、しばしば単に機能しなくなり、さらにこんな単純な効果にしては動作がもっさりしています。
チャンネルがめちゃくちゃです。例が機能していないように見えますが、ビデオではなぜか2つのエッジが白くなるだけです。
色のオプションやテクスチャはかなり醜いです。ガラスの色は明らかに機能していません。「真鍮」が最後の1つで理由もなく「オリーブ」になってしまいます。
ラジオボタンはデジタルインターフェースには悪いアイデアで、完全に一貫性がなく実装されており(‽)、中央のものはまったく機能しません。
ボタンには押されたかどうかのフィードバックがほとんどありません。
Googleのマテリアルデザイン、少なくとも初期のバージョンを思い起こさせますが、それよりもずっと雑で、使い勝手が悪く、色も地味です。
- charlesrice
私のお気に入りはノブです。物理的なもののように掴んで回せるものもあれば、カーソルの垂直位置にしか反応しないものもあり、使おうとすると気が狂ったように感じます。