グラスモーフィズムとは
スペルはGlassmorphism
磨りガラスを使用したような、透明感のあるデザインが特徴的。透明度とブラーを使って表現する。
Appleが使ってるイメージ
細かい話はここを読め
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
注意しよう
1: 透明度は塗りつぶしで変えよう
早い話RGBAを使おうという話。
.hoge {
opacity: .5; /*<---こっちじゃなくて*/
background-color: rgba(255, 255, 255, .5); /*<---こっちを使おう*/
}
2: 背景は鮮やかに
単純すぎたり、鈍すぎる背景だとグラスモーフィズムがうまく働かない(らしい!)。
グラスモーフィズムのサイトでは、鮮やかな色のグラデーションを使うことが多いように思われる。
3: 1pxのボーダー
1pxのボーダーを入れることでcoolでcreativeになるらしい。
4:アクセシビリティには気をつけて
透明効果はあくまで装飾であることを念頭に置き、ボタンなどには十分にコントラストに差をつけるべし。
デザインするにあたっては当然といえば当然ではあるが、アフォーダンスやゲシュタルトの法則を気にかけろという話である。
cssで実装する際
基本は前述したとおり、rgbaの背景色を使用し、borderを1px入れる感じで作ります。
それに加えてdropshadowなんかを入れるといい感じになりそうです。
あとblurも入れましょうね。
/*こんな感じ?*/
.hoge {
background-color: rgba(255, 255, 255, .3);
border: 1px solid rgba(255, 255, 255, .5);
filter: drop-shadow(0.0px 0.0px 10.0px #000);
backdrop-filter: blur(6px);
}
作ってみた
ここまでcssで例とか出しましたけど、僕は最近流行りのtailwind css使います。(なれてきて気持ちよくなってる)
See the Pen glass by heishi1HUMANITY (@heishi1humanity) on CodePen.