日本語版
最新ニュース
科学＆テクノロジー

ゲームからウェブまでのすりガラス

ゲームからウェブまでのすりガラスUI開発者として働いていた頃、 フォルツァ ホライゾン 3 そして フォルツァ モータースポーツ 7見事なつや消しアクリルのデザイン要素を扱う機会がありました。以下はその例です ホライゾン3:このデザインに触発されて、私は常に HTML を使用して同様の効果を作成したいと考えていました。このページでは、美しいガラス効果を実現するための私の試みと、このテクニックを自分で試してみたい人向けのサンプル コードとアセットを共有します。最終製品は次のとおりです。最終レシピの先読みこのチュートリアルの核心に入る前に、最終レシピまで直接スキップして、自分のページに直接貼り付けることを好む読者もいるかもしれません。そうした読者は、このトグルで便利に隠すことができます。光反射アセットJavaScriptのバージョンこれはすべてのプラットフォームで機能します。HTML1 2 3 4div class="glass"> div class="light" data-js-background-attachment-fixed/> div class="drag-me">Drag Mediv>div>CSS1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17…

執筆 nipponese
ゲームからウェブまでのすりガラス

1732507312
2024-11-24 19:23:00

ゲームからウェブまでのすりガラス

UI開発者として働いていた頃、 フォルツァ ホライゾン 3 そして フォルツァ モータースポーツ 7見事なつや消しアクリルのデザイン要素を扱う機会がありました。以下はその例です ホライゾン3:

このデザインに触発されて、私は常に HTML を使用して同様の効果を作成したいと考えていました。このページでは、美しいガラス効果を実現するための私の試みと、このテクニックを自分で試してみたい人向けのサンプル コードとアセットを共有します。最終製品は次のとおりです。

最終レシピの先読み

このチュートリアルの核心に入る前に、最終レシピまで直接スキップして、自分のページに直接貼り付けることを好む読者もいるかもしれません。そうした読者は、このトグルで便利に隠すことができます。

光反射アセット

JavaScriptのバージョン

これはすべてのプラットフォームで機能します。

HTML

1
2
3
4
div class="glass">  div class="light" data-js-background-attachment-fixed/>  div class="drag-me">Drag Mediv>div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),        3px 2px 10px rgba(0, 0, 0, 0.25),        inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),        inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
    border-radius: 5px;
    overflow: hidden;}
.light {      background-image: url(path/to/light.png);   background-repeat: repeat;   background-size: 750px;
      opacity: 0.075;
      position: absolute;   bottom: 0;   left: 0;   right: 0;   top: 0;
      z-index: -1;}
.drag-me {    display: flex;  align-items: center;  justify-content: center;
    height: 30px;
    background-color: rgba(12, 13, 14, 0.75);}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const updateDataJSBackgroundAttachmentFixedElements = () => {    const elements = document.querySelectorAll(    "[data-js-background-attachment-fixed]",  );
  for (const element of elements) {        if (!(element instanceof HTMLElement)) continue;
        const clientRect = element.getBoundingClientRect();
        const backgroundPositionX = `${(-clientRect.x).toString()}px`;    const backgroundPositionY = `${(-clientRect.y).toString()}px`;
    element.style.backgroundPositionX = backgroundPositionX;    element.style.backgroundPositionY = backgroundPositionY;  }};
const initDataJSBackgroundAttachmentFixed = () => {  requestAnimationFrame(() => {    updateDataJSBackgroundAttachmentFixedElements();    initDataJSBackgroundAttachmentFixed();  });};
initDataJSBackgroundAttachmentFixed();

非JavaScriptバージョン

これはすべてのプラットフォームで機能するわけではありません。

HTML

1
2
3
div class="glass">  div class="drag-me">Drag Mediv>div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),        3px 2px 10px rgba(0, 0, 0, 0.25),        inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),        inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
    border-radius: 5px;
    overflow: hidden;}
.glass::before {    content: "";
    background-image: url(path/to/light.png);  background-repeat: repeat;  background-size: 750px;
    opacity: 0.075;
    position: absolute;  bottom: 0;  left: 0;  right: 0;  top: 0;
    z-index: -1;
    background-attachment: fixed;}
.drag-me {    display: flex;  align-items: center;  justify-content: center;
    height: 30px;
    background-color: rgba(12, 13, 14, 0.75);}

さあ、ショーを続けましょう！

背景フィルター 力仕事をする

優れたすりガラス効果の鍵は、 ガウスぼかし 背景をぼかし、半透明の画面の外観を模倣します。多くのブラウザとゲーム エンジンは、次のような効率的な近似を使用してガウスぼかしを実現します。 ボックスがぼやける。

CSS では、次を使用してガウスぼかしを適用できます。 背景フィルター と ぼかし 関数。 iOSの場合 -webkit-backdrop-filter これまで誰も試したことのない設定に深く踏み込む場合を除き、これは必須です (設定 -> Safari -> 詳細 -> 機能フラグ -> 「CSS プレフィックスなし背景フィルター」)。 背景フィルター ブラウザでサポートされたのは最近になってからです。そのため、Internet Explorer ユーザーはこれらのデモを体験できません。

これらすべてをまとめると、私たちのグラスはシンプルになります。 ディビジョン:

私たちは、 ディビジョン と ガラス クラス：

1
2
3
4
5
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);}

これが結果です。ドラッグして、ぼかしが背景とどのように相互作用するかを確認します。

奥行きを加える

を使用して立派なガラスを作りました。 背景フィルター: ぼかし(10ピクセル)。多くのガイドはここで終わりますが、改善の余地はあります。今のところ、私たちのガラスは平らで退屈に見えます。本物のガラスには、私たちが見逃しているエッジの周りに興味深い視覚的特徴があります。それを実現しましょう。

エッジ

まず、ガラスにエッジを追加します。その他、例えば css.glass、これを使用して実行します 国境: 1ピクセル 固体。境界線は、要素のサイズと要素が子とどのように相互作用するかに影響します。私は使用することを好みます ボックスシャドウ: 差し込み。を使用することで ボックスシャドウ: 差し込み 子供たちはネガティブな要素を持たずにガラスのコンテンツ領域をシームレスに塗りつぶします。 マージンまたは他の魔法。これにより、ガラス表面に貼られたデカールのように動作することができます。

ボックスシャドウ 少なくとも 2 つのサイズ値が必要で、最大 4 つまでサポートされます。最初の 2 つは影の x オフセットと y オフセットを定義します。ガラスのエッジを模倣するために、2 つの半透明の白を使用します。 ボックスシャドウs.

最初の影は、外側から見たガラスのエッジを表します。この例では、これは下端と左端に沿って表示されます。 2 番目の影は、ガラスを通して見たエッジを表します。この例では、これは上端と右端に沿って表示されます。

ガラスを通してエッジを見ると光が減少するため、上端と左端は下端と右端に比べて柔らかく半透明になります。この微妙な違いにより、ガラスの右下隅がわずかに盛り上がっているように見えます。

1
2
3
4
5
6
7
8
9
10
11
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025);}

リアルシャドウ

私たちのガラスにはある程度の奥行きができましたが、まだ何か違和感があります。2D 空間に 3D オブジェクトが閉じ込められているような不気味な外観です。これを修正するには、背景から物理的に浮き上がって見えるようにしましょう。ありがたいことに、これには簡単な CSS トリックがあります。 ボックスシャドウ。

を追加しましょう ボックスシャドウ エッジのサイズに比例して、目的のリフト効果を作成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),        3px 2px 10px rgba(0, 0, 0, 0.25);}

光に溶け込む

私たちのガラスには適度な深さがあり、素晴らしい停止点にいます。と比較して 他のガラスのデザイン 私たちはすでに時代の先を行っていますが、やるべきことはまだあります。ガラスと光の相互作用に焦点を移してみましょう。

単純な表面下散乱

を導入して光で遊んでみましょう。 表面下散乱 近似。表面下散乱とは、半透明の表面内で光が分散する方法を指します。ガラスの場合、これはエッジ付近で最も顕著です。

使用します ボックスシャドウ: 差し込み この効果をシミュレートします。これにより、端からガラスの中にわずかに浸透する微妙な光の層が追加されます。効果を十分に理解するには、画像の暗い領域にガラスをドラッグしてみてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),        3px 2px 10px rgba(0, 0, 0, 0.25),        inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025);}

より多くの表面下散乱

ご覧のとおり、表面下の散乱はわずかです。さらに深いレイヤーを追加してさらに強化しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),        3px 2px 10px rgba(0, 0, 0, 0.25),        inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),        inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);}

もっと面白い光

私たちは良い仕事をしました 屈折する ガラス要素を通した背景からの光。しかし、ガラスのもう 1 つの重要な特性は、次のような能力です。 反映する 表面から光が消えます。この反射特性が、私たちのガラスに他の HTML ガラスの例とは異なる独特の外観を与える秘密のソースです。

光線

この効果を作成するために、光線のイメージをブレンドします。同様の画像を自分で作成することに興味がある場合は、オンラインでチュートリアルがたくさんあります。ここからの 1 つです YouTube、そしてここにあります 詳細なテキストによるウォークスルー そのアプローチを好む場合は。あるいは、私が作成したこれらの光線をダウンロードして使用することもできます。

この画像を背景にブレンドするいくつかの方法を検討します。 1 つ目は、次のように設定することです。 背景画像 当社のガラスエレメントの。これを要素に対して直接実行すると、 ボックスフィルター をぼかす 背景画像—私たちはそれを望んでいません。代わりに、 背景画像 を使用して疑似子要素に ::前に。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.glass::before {    content: "";
    background-image: url(path/to/light.png);  background-repeat: repeat;  background-size: 750px;
    opacity: 0.075;
    position: absolute;  bottom: 0;  left: 0;  right: 0;  top: 0;
    z-index: -1;}

この効果を最も簡単に観察するには、「塗りつぶしスペースの切り替え」オプションを使用します。

ダイナミックライト

光線はうまく混ざり合っていますが、ガラス上では静的に見えます。実際には、光を通してガラスを動かすと、光がガラス表面を横切って移動するときにダイナミックな反射が作成されます。残念ながら、この効果をすべてのブラウザで再現するのは困難です。これに対処するために、モバイルを除くほとんどのプラットフォームで動作する純粋な CSS アプローチと、どこでも動作する CSS + JavaScript ソリューションの 2 つのソリューションを検討します。

CSS ソリューションは十分にシンプルです。ただ追加するだけです 背景添付ファイル: 修理済み 私たちへ ::前に 要素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.glass::before {    content: "";
    background-image: url(path/to/light.png);  background-repeat: repeat;  background-size: 750px;
    opacity: 0.075;
    position: absolute;  bottom: 0;  left: 0;  right: 0;  top: 0;
    z-index: -1;
    background-attachment: fixed;}

[塗りつぶしの切り替え]オプションを使用し、ガラスをスクロールまたは移動して効果を観察します。モバイルのサポートは制限される場合があることに注意してください。これについては次の例で説明します。

クロスプラットフォームのダイナミック ライト

JavaScript を使用してシミュレーションします 背景添付ファイル: 修理済み すべてのプラットフォームで 🙁。効果を実現するには、動的に調整します。 背景位置 画像がビューポート内で移動するにつれて。アクセスしてから ::前に 要素を JavaScript から直接取得するのは効率が悪いため、 ディビジョン その代わり。

私たちの JavaScript は、特定の要素を持つ要素をターゲットにします。 データ-* 属性。属性を使用します data-js-background-attachment-fixed。

これをすべて組み合わせると、次の 2 つになります。 ディビジョンs:

1
2
3
div class="glass">  div class="light" data-js-background-attachment-fixed/>div>

新しい子をスタイリングします ディビジョン と ライト クラス：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.light {      background-image: url(path/to/light.png);   background-repeat: repeat;   background-size: 750px;
      opacity: 0.075;
      position: absolute;   bottom: 0;   left: 0;   right: 0;   top: 0;
      z-index: -1;}

この JavaScript は背景を更新します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const updateDataJSBackgroundAttachmentFixedElements = () => {    const elements = document.querySelectorAll(    "[data-js-background-attachment-fixed]",  );
  for (const element of elements) {        if (!(element instanceof HTMLElement)) continue;
        const clientRect = element.getBoundingClientRect();
        const backgroundPositionX = `${(-clientRect.x).toString()}px`;    const backgroundPositionY = `${(-clientRect.y).toString()}px`;
    element.style.backgroundPositionX = backgroundPositionX;    element.style.backgroundPositionY = backgroundPositionY;  }};
const initDataJSBackgroundAttachmentFixed = () => {  requestAnimationFrame(() => {    updateDataJSBackgroundAttachmentFixedElements();    initDataJSBackgroundAttachmentFixed();  });};
initDataJSBackgroundAttachmentFixed();

[塗りつぶしの切り替え]オプションを使用し、ガラスをスクロールまたは移動して効果を観察します。

ビッツ＆ボブズ

ガラス効果が完成したので、残りの CSS プロパティと HTML を追加して最初の例を完全に複製して完成させましょう。つまり、美しい丸みを帯びた角と、色や文字でガラスを強化する追加の要素を意味します。

丸い角

ガラスの角を丸くするのは簡単です。 境界半径 財産。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),        3px 2px 10px rgba(0, 0, 0, 0.25),        inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),        inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
    border-radius: 5px;}

色ガラス

ガラスに色を付けるために、上部に最後の要素を 1 つ追加します。 背景色 半透明のアルファ値を使用します。ガラスの角は丸いため、子要素はガラスの表面を越えて広がります。これを防ぐために、次を使用します。 オーバーフロー: 隠れた クリップします。

最終的な HTML は次のとおりです。

1
2
3
4
div class="glass">  div class="light" data-js-background-attachment-fixed/>  div class="drag-me">Drag Mediv>div>

そして、最終的な CSS は、 ガラス そして ドラッグミー クラス:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.glass {    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:        inset -0.75px -0.5px rgba(255, 255, 255, 0.1),        inset +0.75px +0.5px rgba(255, 255, 255, 0.025),        3px 2px 10px rgba(0, 0, 0, 0.25),        inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),        inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
    border-radius: 5px;
    overflow: hidden;}
.drag-me {    display: flex;  align-items: center;  justify-content: center;
    height: 30px;
    background-color: rgba(12, 13, 14, 0.75);}

それをレンダリングすると、私たちの古い友人が見えます。

ご宿泊いただきありがとうございます!

素晴らしいガラス効果の作成にご協力いただきありがとうございます。旅を楽しんでいただければ幸いです。すべてのアセットとコードを簡単にコピーする方法については、必ずチェックしてください。 最終レシピの先読み 冒頭近くのセクション。

について話し合う
ハッカーニュース

#ゲームからウェブまでのすりガラス

執筆者について: nipponese

Nipponese News編集部は、国内外のニュースを日本語で分かりやすくお届けします。

Nipponese News