ハクソク

世界を動かす技術を、日本語で。

Show HN: 高解像度ガラス効果のためのCSSジェネレーター

327日前原文(glass3d.dev)

概要

  • Glassmorphism 効果をさらに進化させたCSS実験プロジェクトの紹介
  • ::before や ::after 疑似要素を活用したレイヤー構成
  • クロスブラウザ互換性 の確保が設計の重要ポイント
  • 各レイヤーの役割と調整ポイントの説明
  • リソース負荷や推奨用途、今後のライブラリ化計画について

Glassmorphismエフェクトの深化と設計の工夫

  • Glassmorphism ジェネレーターは多数存在
  • さらなる表現力向上を目指した独自プロジェクト
  • CSSプロパティの重ね掛け とブラウザごとの挙動差との格闘
  • ::before ・ ::after 疑似要素によるレイヤー構成で互換性確保
  • メイン要素に色や不透明度を持たせると、 Chrome で角に色のにじみ発生
  • テクスチャを移動すると、 bevel のスペキュラハイライトが不明瞭
  • bevel を移動すると、 backdrop-filter でぼやけてしまう問題
  • 各レイヤーの主な構成要素
    • ぼかし・明るさ・彩度調整 （backdrop-filter）
    • 微細な半透明テクスチャ
    • 擬似3D bevel （box-shadow活用、outline非使用）

運用上の注意点と対応ブラウザ

  • Glassmorphism はリソース消費が大きい
  • アクセント用途推奨、デスクトップの広範囲要素では非推奨
  • Chrome、 Safari、 Firefox の最新バージョン（デスクトップ・モバイル）で動作確認済み
  • バグや描画不具合があればフィードバック歓迎

今後の展開とライブラリ化計画

  • 現在は フレームワーク非依存 の glass SCSS/component library として開発中
  • さらなる機能拡張・安定化を予定
  • 早期プレビュー版としてコミュニティからの意見募集

Hackerたちの意見

すごくいい感じ！コンピュータグラフィックスが「一つの変なトリック」じゃなくて、「5つのレイヤートリック」ってことにいつも驚かされるよね。クロスブラウザ対応も追加のチャレンジだし。どの部分が一番リソースを食うか、なんか感覚ある？素朴に考えると、バックドロップフィルターかな。

└

そうそう！こんなにトリックが必要だとは思わなかったよ。君の直感は正しい、最もリソースを消費するのはバックドロップフィルターのぼかし部分だね。ぼかしの値が高いほど、レンダリングする前に「相談」しなきゃいけない隣接ピクセルが増えるからね。それに、スクロールしたり動画の背景が変わるときの連続再描画もリソースを消費する要因だよ。

これは、表面のすぐ後ろにあるピクセルだけをぼかす問題があるね。詳しくは、https://www.joshwcomeau.com/css/backdrop-filter/#the-issue を見てみて。あとは、https://news.ycombinator.com/item?id=42302907 の議論も読む価値あり。バックドロップが動く場合は結構重要だけど、静的ならあんまり関係ないかな。

└

ジョシュの素晴らしい記事は読んだし、チュートリアルを実装してみたよ。残念ながら、SVGマスクのボーダー半径でいくつか問題が出ちゃった。ハードコーディングした要素ではうまくいったけど、ユーザーのブランディングやコンテナクエリに応じてボーダー半径が変わるコンポーネントライブラリ全体でどうやって使えるかをまだ考え中なんだ。

かなりいい感じだね。でも、ガラスの屈折効果がないと、レイヤーの視覚的な分離が弱くなっちゃうと思う。Liquid Glassの一番の貢献はそこだと思う。Materialには、アプリが一貫した動くレイヤーで構築されるべきだっていう素晴らしいデザイナーリソースがあって、側面から3Dで見せてる。レイヤーがあるのは明らかなんだけど、2Dにして全部まとめると、特徴を見つけるのがすごく難しい。隅にアクションボタンがあっても、みんな見逃しちゃうことが多いし。動きがあれば、クロームとコンテンツの違いを強調するけど、視覚的に定義されるものが少なすぎる。Liquid Glassの一番の強みは、エッジの歪みだと思う。コンテンツが動くときに、人間の視覚がすぐに反応する非線形の動きがあるんだよね。静止画はあんまり良く見えないけど、動いてると要素の違いがすごく際立つ。あの重要な屈折要素がここには欠けてる。もう一つ素晴らしいウェブデモを見たことがあるけど、今は見つけるのに苦労してる。これを見つけたけど、あんまり良く見えないし、モバイルではパフォーマンスが悪い。けど、ステップを分解して、このタスクがどれだけ複雑かを示してるのはいいね。エッジの歪みを入れるのは難しいし、SVGフィルターに頼るのはハックするには厳しい道だね。https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki... Liquid Glassの試みが集まったもの（CodePen Spark）を見つけたよ。2つ目のリンクは、非常に特定の事前定義されたハードコーディングされたSVGで、結構いい感じに仕上がってると思う。https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

└

Liquid GlassでAppleが作った賢い防壁だと思う。簡単に劣化版を作れる効果を選んだけど、本物の正しいやり方でやるのはすごく難しいからね（人間は毎日本物のガラスを見てるから、その違いを直感的に感じ取れる）。だから、真似する人たちは明らかに劣って見えるし、Appleは「プレミアムな見た目」の製品を維持できるんだ。

└

Liquid Glassのエッジの歪みは確かに素晴らしいよね。いつか再現してみたいと思ってる。今のプロジェクトでは、磨かれたように見える素材を作ることを目指していて、ブラウザ間で一貫して動作するものにしたいんだ。リアルな3Dは使わないしね。それに、固定背景の上を動くと効果がより目立つのもその通り。今作ってるライブラリのデモサイトもそれをやってるけど、まだ準備が整ってないんだ。リソースをシェアしてくれてありがとう！

これは新しいデザインって言えるの？何が特別なの？2006年のWindows VistaのAeroグラス効果と比べて、あんまり違いが見えないんだけど。backdrop-filter: blurを使ってるサイトもたくさん見たし。何か見落としてるのかな？

└

もっと遡って見てみて:) これはOSX Cheetah（2000年）からの新しいAquaだと思う。ちょっと脱線するけど、20年前にトラムにひかれて死んで、すべてのコンピュータがWindows Vistaを使ってる世界にタイムトラベルする夢を見たことがある。つまり、もしかしたらここで何かに気づいてるかもしれないね。

└

その通り、グラスモーフィズムはこのミレニアムの初期からあるよね。例えば、Project Looking Glass（2003）は、3D空間でひっくり返せるガラスの板のようなデスクトップ環境を試みたんだ！それでも、テクスチャレイヤーやボックスシャドウのベベルがある他のグラスジェネレーターは見つけられなかったな。

いい効果だけど、個人的にはこれがガラスに感じられない。最も即座に感じる違いは、光がベベルと相互作用しないことだと思う。ガラスに光が反射して、ライティングや色に影響を与えることを期待してる。単にぼかしを入れるだけじゃ足りないよね。それに、ガラスには面白い焦点を持つ影があるはず（Appleですらやってないかも）。ここには影が見えるけど、シンプルなドロップシャドウに感じる。箱が3Dの物理オブジェクトというより、フラットなカードに感じられるのが新しいトレンドの一部だと思う。どちらにしても、これをCSSだけでエミュレートするのは簡単じゃないし、GPUで動くシェーダーの方が適してると思う。

└

CSSでできないなら、どうやってやればいいの？共通のdivにGPUシェーダー効果を適用するにはどうするの？基本的なHTMLにGPU効果を適用できないなら、任意のCanvasのようなカスタムなものに適用する必要があるなら、新しいレンダリングエンジンを作り直すしかないよね。HTMLは死んだ。テキストを伝えるためにタグが必要なだけで、他のほとんどはウェブページを広告だらけにするために使われてるから、タグとより良いGPU統合から始めて、他は全部省いちゃおう。

これ集めてる！ https://github.com/swyxio/spark-joy 他にも - https://ui.glass/generator/ この無料のCSSジェネレーターを使って、グラスモーフィズムデザイン仕様に基づいてスタイルプロパティを素早くデザイン・カスタマイズしよう。 - フロステッドグラスのスティッキーヘッダー https://www.joshwcomeau.com/css/backdrop-filter/ - グラッシーなグラスモーフィズム codepen, コンテキストで css .blur-and-rotate { border-radius: 20px; backdrop-filter: blur(20px) hue-rotate(120deg); -webkit-backdrop-filter: hue-rotate(120deg); }

└

いいね！Spark Joyは素晴らしいリソースに見える。

└

ASCIIフォントジェネレーターを探してたけど、見つからなかった。これが俺が使ってるツールだよ：https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...

小さな問題だけど、上部とトグルやコードのあるスクロール可能エリアの間の影が、スクロールダウンすると消えちゃうんだ（最初は隠れてて、フェードインするべきだと思う）。

└

いいところに気づいたね！フェードインの問題じゃなくて、影がただ視界からスクロールアウトしてるだけなんだ。あの「オーバーハング」ボックスシャドウは、要素の内側に適用するようにデザインしたんだけど、今回は後者のタイプを適用する必要があるってことがわかったよ。教えてくれてありがとう！

そのコンテンツ、俺のスマホではかなり遅くスクロールするんだけど。他に意図的に遅くするスクロール効果があるの？それともガラスの見た目の副作用なのかな？

└

M4で128GBのRAM、問題なく動いてるよ。

└

面白いね。ページ上にはスクロールエフェクトは全くないよ。どのデバイス、ブラウザ、インターネット接続のレベルを使ってるか教えてもらえる？

このプロジェクトは数ヶ月の実験の結果だよ。[..] それが見えるね、すごい！特にあの和紙のエフェクトが最高！

└

ありがとう！

テクスチャを加えると、すごく良く見えるね！