ゲームからWebへ拡張されたFrosted Glass技術

 (tyleo.com)
4 ポイント 投稿者 GN⁺ 2024-11-25 | 1件のコメント | WhatsAppで共有

ゲームからWebへのフロストガラス

  • 紹介

    • Forza Horizon 3 と Forza Motorsport 7 のUI開発者として働く中で、美しいフロストアクリルのデザイン要素を体験した。
    • HTMLを使って同様の効果を実装したいと考え、このページでその試みを共有している。

  • backdrop-filter の役割

    • フロストガラス効果の核心は、Gaussianブラーを使って背景をぼかすことにある。
    • CSSでは backdrop-filter と blur 関数を使って Gaussian ブラーを適用できる。
    • Internet Explorer はこの機能をサポートしていない。

  • 奥行きの追加

    • backdrop-filter: blur(10px) を使って基本的なガラスを作ったが、より奥行きのある効果のために box-shadow: inset を使って縁に深みを加えた。

  • 実際の影

    • 3Dオブジェクトが2D空間に閉じ込められているような印象をなくすため、暗い box-shadow を追加して、ガラスが背景から物理的に浮いて見えるようにした。

  • 光との相互作用

    • ガラスと光の相互作用を改善するため、シンプルなサブサーフェススキャタリングを導入した。
    • box-shadow: inset を使って、光がガラスの縁でわずかに広がる効果をシミュレートした。

  • より興味深い光

    • ガラスの反射特性を強調するため、光線を背景画像として使用した。
    • ::before を使って背景画像をガラス要素に適用した。

  • 動的な光

    • CSSとJavaScriptを使って、すべてのプラットフォームで動的な反射効果を実装した。
    • JavaScriptを使って background-position を動的に調整し、background-attachment: fixed 効果をシミュレートした。

  • 仕上げ

    • ガラス効果を完成させるため、角丸、色、テキストを追加した。
    • border-radius を使って角を丸め、overflow: hidden を使って子要素がガラス表面からはみ出さないようにした。

  • 結論

    • フロストガラス効果を作る過程を追っていただき、感謝している。
    • すべてのアセットとコードをすばやくコピーできる方法については、文書冒頭の "Final Recipe Lookahead" セクションを参照。

関連記事

1件のコメント

 
GN⁺ 2024-11-25
Hacker Newsのコメント

  • あるユーザーは、美的要素は気に入っているものの、クライアントが高コストなぼかしフィルターを繰り返し計算するのは無駄だと感じており、Web開発全般の傾向として負荷をかけすぎているように見えると述べている

    • GPUを使って最適化されているが、実際には大きな違いはないだろうと考えている

  • 別のユーザーは、Windows 7の「光線」テクスチャを抽出してAndroidで類似の効果を実装しようとしたことがあり、ぼかした背景の彩度を少し上げたと説明している

  • また別のユーザーは、インタラクティブなデモは素晴らしいと思う一方で、UIデザインにおけるフロステッドグラスの使用は嫌いで、Mac OSに追加されたのは後退だと感じると述べている

    • 特に、パネルの背後にあるコンテンツが動的だったりユーザー生成だったりする場合には理想的ではないと考えている

  • あるユーザーは、2008年にCSS実験を通じて、固定位置のあらかじめぼかし処理された背景画像を使って類似の効果を実装したと説明している

    • これはリアルタイムのガウシアンぼかしより高性能だが、動的な背景画像を扱えない欠点があると述べている

  • 別のユーザーは、10個の効果が重ねられており、最も求められる美的要素を除いても7個程度は多すぎると考えている

    • 背景色、ぼかし、ボックスシャドウ、あるいは境界線だけを使うのがよいと提案している

  • あるユーザーは、ノイズテクスチャを追加して、よりざらついた結果を得るのが好きだと説明している

  • 別のユーザーは、技術的達成としては見事だが、UXは悪いと述べている

    • 半透明パネル内の内容は読んだり理解したりしにくく、背景とのコントラストが低く、一貫性もないためだと説明している

  • あるユーザーは、元々のCSSデモの1つがフロステッドグラス効果のためのものだったと述べており、興味深いと感じている

  • また別のユーザーは、CSSの創造的で強力な側面を見るのはいつも印象的だと思う一方で、HTML/CSSの一部の理解レベルには自分は決して到達できない気がすると説明している

  • 最後に、インタラクティブな例は良いが、以前のバージョンに切り替えられる比較機能やトグルがあればさらに良かっただろうと述べている

    • 多くの場合、各反復での改善が微妙すぎて違いが分からなかったと説明している