CSSを使用してガラスムルファズム効果を作成する方法

CSSのガラス模倣効果を作成するには、背景のぼかしを実現するために背景フィルターを使用し、RGBA（255,255,255,0.1）などの半透明の背景を設定し、サブルの境界と影を追加して階層の感覚を高め、要素の背後に十分な視覚的コンテンツがあることを確認する必要があります。 1。背景：Blur（10px）を使用して、バックグラウンドコンテンツを曖昧にします。 2. RGBAまたはHSLAを使用して透明な背景を定義して、透明性の程度を制御します。 3. 3次元感覚を高めるために、1pxの固体RGBA（255,255,255,0.3）の境界とボックスシェードを追加します。 4.コンテナに写真やテクスチャなどの豊富な背景があることを確認して、ぼかし浸透効果を提示します。 5.サポートされていない場合は、-webkit-backdrop-filterと代替の背景色を提供し、最終的には近代的で読みやすい完全な文章の両方のガラス効果を実現します。

CSSを使用してガラス変形効果を作成するには、透明性、ぼやけ、微妙な境界線を組み合わせて、つや消しのガラスの外観を模倣します。オーバーレイ、カード、ナビゲーションバーの最新のUIデザインで広く使用されています。効果的に達成する方法は次のとおりです。

1. backdrop-filterを使用して、バックグラウンドブラーを使用します

Glassmorphishの鍵は、要素自体ではなく、要素の後ろの領域を曖昧にすることです。これはbackdrop-filterが登場する場所です。

 。ガラス {
  バックドロップフィルター：Blur（10px）;
}

これは、半透明の表面を介して表示するコンテンツのように、要素の背後にあるものにぼやけています。注： backdrop-filter 、すべての古いブラウザー（特に古いバージョンのFirefoxと一部のモバイルブラウザー）で動作しないため、フォールバックを検討してください。

2.半透明の背景を設定します

rgba()またはhsla()色を使用して、背景をわずかに透明にして、ぼやけ効果が表示されます。

 。ガラス {
  背景：RGBA（255、255、255、0.1）;
  バックドロップフィルター：Blur（10px）;
}

Alpha値（ rgbaの最後の数）を調整して、透明性を制御できます。

• 0.1 →非常に透明な（軽い霜の外観）
• 0.3 →より固体ですが、それでもガラス状です

不透明度が低い白を使用すると、清潔でモダンな外観が得られます。暗いテーマについては、お試しください：

背景：RGBA（255、255、255、0.05）;

または暗い色合い：

背景：RGBA（0、0、0、0.2）;

3.深さのために微妙な境界線と影を追加します

薄くて軽い境界線は、ガラスのようなエッジを強化します。それをソフトボックスシャドウと組み合わせて、バックグラウンドから要素を持ち上げます。

 。ガラス {
  背景：RGBA（255、255、255、0.1）;
  バックドロップフィルター：Blur（10px）;
  -webkit-backdrop-filter：blur（10px）; / * safariの場合 */
  境界線：1pxソリッドRGBA（255、255、255、0.3）;
  Box-Shadow：0 4px 30px RGBA（0、0、0、0.1）;
  ボーダーラジウス：12px;
}

• border ：光を反映する信仰の端を追加します
• box-shadow ：深さと分離を与えます
• border-radius ：ガラスムルフィックデザインに典型的な角を柔らかくします

4.適切なコンテキストを確保します

Glassmorphismは、ぼやけて要素の背後に何かがある場合にのみ機能します。確認する：

• コンテナには十分な視覚コンテンツ（画像、パターン、またはレイヤード要素）があります
• ガラスの要素は、平らなしっかりした背景にありません

構造の例：

 <div class = "container">
  <div class = "glass"> content </div>
</div>

 。容器 {
  背景：url（ 'background-image.jpg'）繰り返しセンターセンター。
  パディング：40px;
}

。ガラス {
  背景：RGBA（255、255、255、0.1）;
  バックドロップフィルター：Blur（10px）;
  -webkit-backdrop-filter：blur（10px）;
  境界線：1pxソリッドRGBA（255、255、255、0.3）;
  Box-Shadow：0 4px 30px RGBA（0、0、0、0.1）;
  ボーダーラジウス：12px;
  パディング：20px;
  色：白;
}

ブラウザのサポートとフォールバック

backdrop-filterはどこでもサポートされていないため：

• Safariに-webkit-backdrop-filter使用します
• サポートされていないブラウザにフォールバックの背景色を提供します

。ガラス {
  背景：RGBA（255、255、255、0.1）;
  バックドロップフィルター：Blur（10px）;
  -webkit-backdrop-filter：blur（10px）;
}

@supports not（backdrop-filter：blur（10px））{
  。ガラス {
    背景：RGBA（255、255、255、0.5）; / *その他の不透明なフォールバック */
  }
}

これにより、Blurが利用できない場合でも読みやすくなります。

それだけです - CSSだけを使用した清潔でモダンなガラス球効果です。トリックは、読みやすさを犠牲にすることなく、透明性、ぼやけ、照明のバランスをとることです。

以上がCSSを使用してガラスムルファズム効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。