グラスモーフィズム

2024年12月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「グラスモーフィズム」に挑戦してみました。

グラスモーフィズムとは

参考：株式会社エヴォワークス｜2022年のWebデザイントレンド「グラスモーフィズム」とは？

グラスモーフィズムとは、透明度・ぼかしを組み合わせ、要素をすりガラスのように見せる表現手法だそうです。

2021年～2022年に流行っていたようです。

スキューモーフィズム→フラットデザイン→マテリアルデザイン→ニューモーフィズム→グラスモーフィズム→クレイモーフィズムという感じでしょうか。

さっそく実装してみましょう。

参考：web design shake｜【コピペOK! 】グラスモーフィズムとは？CSSで作る方法も解説！

以前の「ブレンドモード」の時に使ったハーバーブリッジの画像と文字を使ってみます。

<div class="wrapper">
  <div><img src="images/Harbour_bridge.jpg" alt="ハーバーブリッジ" class="w-100"></div>
  <div class="text glass">Sydney Harbour Bridge</div>
</div>

.wrapper {
  width: 100%;
  position: relative;
}
.wrapper .text {
  max-width: 80%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 25px 50px;
  font-size: min(10vw, 80px);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}     
.glass {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

Sydney Harbour Bridge

① 背景色を白い半透明にして
② 黒い半透明の影をつけて
③ 背景をぼかして
④ 白い1pxの線をつける

という感じでしょうか。

なんかおしゃれな背景のやつ

上記サイトをコピペ参考にして、グラデーションがアニメーションする背景でやってみます。

<div class="gradation">
  <div class="glass">glassmorphism </div>
</div>

.gradation {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: #99fff1;
  background-image: radial-gradient(at 35% 30%, hsla(207,97%,76%,1) 0px, transparent 50%), radial-gradient(at 51% 35%, hsla(27,64%,79%,1) 0px, transparent 50%), radial-gradient(at 77% 30%, hsla(155,60%,77%,1) 0px, transparent 50%), radial-gradient(at 66% 38%, hsla(252,89%,78%,1) 0px, transparent 50%), radial-gradient(at 42% 52%, hsla(335,83%,74%,1) 0px, transparent 50%), radial-gradient(at 59% 72%, hsla(243,87%,65%,1) 0px, transparent 50%), radial-gradient(at 47% 12%, hsla(14,64%,72%,1) 0px, transparent 50%);
  width: 100%;
  height: 50vh;
  background-size: 250% 250%;
  animation: gra 5.0s infinite alternate ease-in-out;
}
@keyframes gra {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
.glass {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10vh 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.5rem;
}

まとめ

とてもオシャレですね！サイトのどこかに取り入れたいものです。