曇らされたガラスのパネルはインターフェイス設計のあらゆるところにあります: デスクトップのオペレーティングシステムの半透明のサイドバー、写真を通すようにするぼやけたヘッダー、ランディングページの勾配の上に浮かぶカード。外観は説明が簡単で、CSS では奇妙に間違えやすい。パネルは平らで灰色になったり、ぼやけは何もしなかったり、背景の半分で白いテキストが読めなくなったりします。
このガイドでは、エフェクトを機能させる CSS、5 つのプロパティのそれぞれが存在する理由、背景が変化し続けるときにテキストを読みやすくする方法、レンダリング パフォーマンスにかかるコスト、および優雅に後退する方法について説明しています。作業例では、の出力を使用します Toolz glassmorphism CSS ジェネレータ、スライダーとライブプレビューからコードを構築します。
tl;dr: Glassmorphism は、パネルがすりガラスのように見える UI スタイルです。半透明の背景に加えて
backdrop-filter: blur()だからその背後にあるコンテンツは柔らかく、通常は1px半透明の境界線と柔らかい影で仕上げられています それは2 つのものを見えるようにする必要があります: 部分的に透明な塗りつぶしとパネルの後ろにカラフルなテキストコントラストが下を通過するものと変化するため、実際の背景の最も明るく暗い部分に対してテストします CSS glassmorphism generator を含むブロック全体を書きます-webkit-プレフィックス、クライアント側、無料、サインアップなし。
CSS のガラスモーフィズムとは何ですか?
Glassmorphism は曇りガラスを模倣する視覚的なスタイルです。要素は不透明度の低い背景色と、背後のピクセルをぼかす背景フィルターを取得するため、その下の形や色は表面を通して柔らかくなっているように見えます。薄い光の境界線がガラスの端を示唆し、穏やかな影がパネルをページから持ち上げます。
キープロパティは backdrop-filter、W3Cで定義されている フィルター効果モジュール レベル 2。 と同じフィルタ関数をとる filter (blur()、 saturate()、 brightness() そして残りは)しかし、要素自体ではなく、要素の後ろの領域にそれらを適用します。その 1 つの違いが、効果を可能にするものです。
ジェネレーターが Frosted プリセット用に生成する完全なブロックは次のとおりです:
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
6 行あり、それぞれにジョブがあります。
フィルターと背景フィルター: 違いは何ですか?
filter テキストや子供を含む要素自体の描画方法を変更します。 backdrop-filter 要素を通して表示される内容を後ろから変更し、要素と #39; 自身のコンテンツを鮮明に残します。
| 財産 | 影響するもの | ぼかし例の結果 | 通常の使用 |
|---|---|---|---|
filter: blur(10px) |
要素とそのすべての子供たち | カードとそのテキストはぼやけています | 画像エフェクト、無効状態、プレースホルダーのロード |
backdrop-filter: blur(10px) |
要素の後ろに描かれているものは何でも | カードはシャープなままで、カードを通して見える背景はぼやけています | 曇らされたガラス パネル、ぼやけたヘッダー、モーダル オーバーレイ |
でカードをぼかすと filter そして、なぜ見出しが読めないのか疑問に思います。あなたは間違ったプロパティを使用しました。 CSS フィルター ジェネレーター をカバーします filter ペアの側面.
ガラスCSSの各ラインはどのように機能しますか?
背景 は色合いであり、そのアルファチャンネルはブロック内で最も重要な数字です。 rgba(255, 255, 255, 0.2) 不透明度 20% で白色です。アルファ 1 ではパネルが固体で何も表示されないため、背景のぼやけが見えません。アルファ 0 では表面がまったくありません。ほとんどの使用可能なガラスは 0.1 ～ 0.4 の間に収まります。
ジェネレーターでは、これは透明度スライダーであり、命名には注意が必要です。スライダーは塗りつぶしの不透明度を設定するため、透明度の値が高いほどパネルはより堅牢になります。透明度 20% は 0.2 のアルファを書き込み、40% は 0.4 を書きます。
バックドロップフィルター 霜が降りるのも. blur(10px) 後ろにあるものに適用されるぼかしの半径を設定します。 saturate(120%) ぼやけた背景の色を 20% 引き上げることで、ぼやけたグレーの洗い流された外観と白い色合いが生成する傾向が打ち消されます。ジェネレーター' s ぼやけたスライダーは 0 ～ 40px で実行され、彩度は 100% ～ 200% です。
接頭辞付きコピー 古いsafariリリースは理解しかしないため、存在します -webkit-backdrop-filter。両方の行を同じ値で記述しても費用はかからず、それらのバージョンをカバーします。
境界半径 角を丸め、発電機で0 から50px。 blurは丸みを帯びた形にクリップされます。
国境 が は18% の不透明度で白の1pxラインです。 glassの端のハイライトとして目を引いて、より暗い背景で最も重要です、そうでなければパネルの境界が溶解します。 generator& #39; s Borderチェックボックスはオンまたはオフにします; 色と幅は固定されています。
の 影 0 8px 32px rgba(0, 0, 0, 0.12) は、パネルとページを区切る、広くてかすかなドロップシャドウです。チューニングしたい場合は、 ボックスシャドウガイド オフセット、ぼかし、広がりを詳しく説明します。
ジェネレータープリセットは何を生成しますか?
プリセットは完成したデザインではなくスタートポイントです。 5つすべてが16pxの半径を使用し、Subtleを除くすべてのものに境界線が含まれています。
| プリセット | 背景 | バックドロップフィルター | 国境 | ベストオーバー |
|---|---|---|---|---|
| 霜が降りた | rgba(255, 255, 255, 0.2) |
blur(10px) saturate(120%) |
オン | カラフルなグラデーションと写真 |
| 光 | rgba(255, 255, 255, 0.35) |
blur(6px) saturate(130%) |
オン | テキストがより多くのサポートを必要とする忙しい画像 |
| 暗い | rgba(15, 23, 42, 0.25) |
blur(12px) saturate(120%) |
オン | 軽い写真、白いテキスト |
| 活気 | rgba(139, 92, 246, 0.15) |
blur(16px) saturate(180%) |
オン | 暗いまたは飽和したヒーローセクション |
| 微妙 | rgba(255, 255, 255, 0.12) |
blur(4px) saturate(120%) |
オフ | 小さなチップとバッジ |
ジェネレータは Frosted を選択した状態でロードされます。プリセットをクリックし、スライダーと色合いの色を調整し、ドラッグするとコード ブロックが更新されます。
バックドロップ フィルターが機能しないのはなぜですか?
ぼかしが何もしていないように見える場合、ほとんどの場合、これらのいずれかが原因となります。
- 背景は不透明です. しっかり
background: #fffまたは1 のアルファは背景を完全に隠します。 alphaを下げます. - ぼかすものは何も後ろにありません. 平らな単色のページの上に、ぼやけた平らな色は平らな色と同じように見えます ガラスはグラデーション、その後ろの写真や形を必要とします ジェネレータ& #39; s プレビューは、この理由で意図的に色の付いた円を持つグラデーションの上に座っています; ザ CSS グラデーション ガイド 効果をよく示す背景の良い情報源です。
- 接頭辞がありません. 古い Safari バージョンでは、接頭辞のないプロパティが無視されます。
- 祖先はフィルターで確認できる内容を制限します。 現在の Filter Effects 仕様では、それ自体のプロパティなど、祖先に対するいくつかのプロパティが指定されています
filter、 アンopacity1 以下またはその他backdrop-filter、新しいバックドロップルートを開始し、ぼかしはそのルート内のコンテンツのみをサンプリングします。ガラスがこれらのいずれかを持つラッパーの内側に座っている場合は、エフェクトまたはプロパティを移動します。 - パネルにはサイズがないか、別の方法で完全に透明です。 ゼロハイト要素または
opacity: 0パネル上では、パネルとともに効果が隠されます。
ガラスパネルでテキストを読みやすくするにはどうすればよいですか?
読み取り可能なガラスは、パネルの下の背景が固定されていない間、テキストの色が固定されているので、スタイルの他のどの部分よりも多くの作業を取ります。 the WCAG 2.2 コントラスト最小値 通常のテキストでは少なくとも 4.5:1、大きなテキストでは 3:1 の比率を要求します。半透明のパネルでは、その比率はその瞬間のパネルの各部分の背後にあるものによって異なります。
加工された例がこの具体的です。コントラスト比は、2 つの色の相対輝度 (L1 + 0.05) / (L2 + 0.05) から計算されます。背景上のガラス充填複合材: 各チャネルはアルファに充填を掛けたプラス (1 マイナス アルファ) に背景を掛けたものになります。ぼかしは隣接するピクセルを平均しますが、領域 & #39; の平均色はほぼどこに残ります。そのため、1 色の広い領域にわたって複合材は公正な推定値となります。
| 塗りつぶし | 背景色 | 複合色 | 白いテキストとのコントラスト |
|---|---|---|---|
| フロスト、0.2で白 | 青 #60A5FA |
について rgb(128, 183, 251) |
2.1:1 について |
| フロスト、0.2で白 | 黄色 #FBBF24 |
について rgb(252, 204, 80) |
1.5:1 について |
ダーク 、 rgba(15, 23, 42, 0.25) |
青 #60A5FA |
について rgb(76, 130, 198) |
4.0:1 についてです |
最初の行を取ります。赤は 0.2 x 255 + 0.8 x 96 = 127.8、緑は 0.2 x 255 + 0.8 x 165 = 183、青は 0.2 x 255 + 0.8 x 250 = 251 です。その色's の相対輝度は 0.454 付近で機能し、白's は 1 なので、比率は 1.05 / 0.504、約 2.1:1 になります。背景の黄色の部分上の同じパネルは約 1.5:1 に下がります。どちらも本文には合格せず、青の上に設定されたダーク プリセットは約 4.0:1 に達します。大きなテキストには十分ですが、小さなテキストにはまだ 4.5:1 が足りません。
実用的な修正は、効果の順に次のとおりです:
- フィルアルファを上げる. 透明度を 20% から 40% に移動すると、背景がより多く非表示になり、コントラストが変動する範囲が狭くなります。
- 軽いテキストの色合いを暗くします、または暗いテキストのためにそれを明るくします。 white text の暗いガラスは、白いテキストを持つ白いガラスよりもはるかに多くの背景を保持します。
- ぼかしを増やす. コントラストの高いディテールが滑らかになるため、文字の後ろの細い白い線が切り裂かれません。
- テキストシャドウを追加します 見出しの最後の手段として。 を テキストシャドウジェネレータ 柔らかいものを素早く作ります.
- 極限状態でのテスト. パネルが置ける最も明るい領域と最も暗い領域のコントラストを確認します カラーコントラストチェッカー、1 つの便利なスポットではありません.
The generator' s copied CSS coveres the glass surface only. previewの白いテキストは出力の一部ではないので、設定します color あなた自身の要素について.
バックドロップフィルターはパフォーマンスに悪影響を及ぼしますか?
できます。 brockdrock blur はブラウザに要素の後ろのピクセルを強制的に読み戻し、その領域が変化するたびにその上にぼかしを実行します。 安価な静的カード上。広い領域、スクロール中、またはパネルの後ろでコンテンツがアニメーション化されると、合成する効果がより高価になり、出力の低い携帯電話では最初にドロップ フレームとして表示されます。
それをコントロール下に置くガイドライン:
- ガラスパネルのサイズは控えめにしてください。フルビューポートの曇りオーバーレイにはカードよりもはるかに多くの費用がかかります。
- より小さいぼかし半径を好みます。コストは半径とともに増加し、約 20 px を超えると視覚的な差は小さくなります。
- ぼかし値自体をアニメーション化しないようにします アニメーション化します
opacityやtransform代わりにパネルの. - 長いスクロール コンテンツ上の粘着性のあるヘッダーには注意してください。スクロール フレームごとに再びぼやけます。本物のミッドレンジ電話でテストします。
ブラウザまたはフォールバックを必要とするユーザーにフォールバックを追加するにはどうすればよいですか?
Chrome、Edge、Firefox、Safari の現在のバージョンはすべてサポートしています backdrop-filter。 very old browsers ignore it and show the semi-transparent fill without the blur, which at low alpha can leave text on the busy background.非常に古いブラウザは、それを無視して、ぼかしのない半透明の塗りつぶしを表示 MDN' s バックドロップフィルターページ。
.glass {
/* Fallback: a more solid fill for browsers without backdrop-filter */
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
}
@media (prefers-reduced-transparency: reduce) {
.glass {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
ザ・ @supports block は、ぼかしが存在する半透明バージョンのみを適用します。 the prefers-reduced-transparency で定義されるメディア機能 メディアクエリレベル 5、透明度の低下をオペレーティングシステムに要求したユーザーがしっかりしたパネルを取得できるようにします。そのメディア機能のブラウザサポートはまだ部分的であるため、唯一の安全策ではなく、利用可能な場合は改善として扱います。
ガラスモーフィズム vs ニューモーフィズム vs フラットデザイン
Glassmorphism はいくつかのサーフェス スタイルのうちの 1 つであり、それぞれのコストが異なります。
| スタイル | 表面の作り方 | 主なcss | 強さ | 主なリスク |
|---|---|---|---|---|
| ガラス形態 | 半透明の塗りつぶしと背景のぼかし | background アルファで、 backdrop-filter |
背景からの深さとコンテキスト | コントラストは異なり、ぼかしはパフォーマンスにコストがかかります |
| 新型 | ページと同じ色で、ペアの影で上げたり押したりします | 二 box-shadow 層 |
柔らかく触感のあるコントロール | コントロールとページのコントラストが非常に低い |
| 平坦 | 固体満ちる、深さ無し | background |
速く、予測可能 | 無地さを感じることができます |
| 素材風の高架化 | 影の深さレベルをソリッドフィルします | box-shadow |
階層をクリア | より少ない大気 |
柔らかく押し出された外観が希望するものに近い場合、 neumorphism generator ペアになった影を構築します。多くのインターフェイスはスタイルを組み合わせています。ヒーロー画像の上に浮かぶナビゲーション バー用のガラス、その下に高密度のコンテンツ用のフラット カードです。
ガラスカードを構築する方法、仕上げを始めます
- を開きます 曇らされたガラスCSSの発電機 そして、背景に最も近いプリセットを選択します。明るい写真の場合は「dark」、カラフルなグラデーションの場合は「frosted」または「light」です。
- 背景の詳細がテキストと競合しないように、Blur を十分に高く設定します (通常は 8 ～ 16 ペンス)。
- 透明度を設定します。 20% から開始し、テキストが背景の最も厳しい部分のコントラストを通過するまで上げます。
- カラーピッカーで色合いを選びます。背景から描かれた色合い's 独自のパレットは、純白よりも自然に見えます。
- 残りのコンポーネントに合わせて半径を調整し、暗い背景の場合は「境界線」をオンにしておきます。
- CSSをコピー をクリックし、カードクラスにブロックを貼り付けます。 追加します
colorそして自分自身をパッドします. - ブロックを で包みます
@supports古いブラウザをサポートしている場合は上記のフォールバックします.
ジェネレーター内のすべてがブラウザーで実行されるため、アップロードされるものは何もなく、ページの読み込み後もオフラインで動作し続けます。関連するサーフェスツールとエフェクトツールの場合 CSS ツールハブ グラデーション、シャドウ、フィルター、トランジションを 1 か所にリストします。
