2023.7.15｜コーディング

CSSで半透明ガラスを表現するグラスモーフィズムの方法

CSSで半透明ガラスを表現するグラスモーフィズムの方法

CSSの機能を活用することで、ホームページやアプリケーションで半透明ガラスを表現することができます。ガラスのような透明感と光沢感を持ったデザインスタイルにする手法をグラスモーフィズム（Glassmorphism）と言います。グラスモーフィズム（Glassmorphism）では、要素やコンポーネントに透明度とぼかし効果を与えることで、奥行きや立体感を表現します。
半透明ガラス効果を作り出すためには、CSSの背景やボックスシャドウ、透明度などのプロパティを組み合わせて使用します。また、グラデーションやぼかし効果も効果的に活用することができます。これらの要素を組み合わせることで、実際のガラスのような透明感と深みを持ったデザインを作り上げることができます。 主にUI要素やカード、ウィンドウ、モーダルなどのコンポーネントに適用されます。また、背景やボタンなどの要素にも効果的に使用されることがあります。

今回は、CSSで半透明ガラスを表現するグラスモーフィズムの方法を解説します。

本記事の内容

CSSで半透明ガラスを表現するグラスモーフィズムの方法

半透明ガラスを表現するグラスモーフィズムを設定する場合は「backdrop-filter」プロパティを用いて「box-shadow」プロパティや「border」を組み合わせて配置します。
「backdrop-filter」プロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。

例：半透明ガラスを表現するグラスモーフィズム

グラスモーフィズムは、モダンで洗練されたデザインを求めるウェブデザイナーや開発者に人気があります。
しかし、適切なバランスと適度な使用が重要であり、デザインの視認性やユーザビリティに影響を与えないように注意する必要があります。

半透明ガラスを表現するグラスモーフィズムのhtmlコード
<span class="markertest scrollmarker">テキストマーカー</span>
半透明ガラスを表現するグラスモーフィズムのcssコード
.box1 {
  background-color: #000; /* 画像がない場合のフォールバック */
  background-image: url("/img/test.jpg"); /* 画像のパスを指定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 80%;
  padding:10%;
}
.box1_glass {
  width: 90%;
  padding: 5%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(10px); /* ぼかしエフェクト */
  backdrop-filter: blur(10px);
  box-shadow: 0 0 10px rgba(248, 68, 157, 0.5); /* 薄い影 */
}
その他の「backdrop-filter」プロパティの値
値 概要
blur ぼかし
brightness 明るさ
contrast コントラスト
drop-shadow ドロップシャドウ
grayscale モノクロ
hue-rotate 色相環を回転
opacity 透明度
sepia セピア
invert 色を反転
saturate 彩度

まとめ

最近では、多くのウェブサイトやアプリケーションでグラスモーフィズムが採用されており、ユーザーにより魅力的な体験を提供するための手法の一つとなっています。
CSSを使用して半透明なガラスを表現するグラスモーフィズムの方法について解説しました。背景のぼかし効果やボックスシャドウ、背景画像、境界線のスタイリング、グラデーションなど、さまざまな要素を組み合わせることで、リアルなグラスモーフィズムの見た目を実現することができます。この手法を使って、ウェブデザインにモダンで魅力的な効果を加えてみましょう。

«
»

関連記事