Webデザインのトレンドは日々変化していきます。
今回は「Mac OS Big Sur」で再注目を浴びたと言われている、グラスモーフィズムについて学んでいきます
グラスモーフィズムとは
半透明のレイヤーをベースとし、磨りガラスのようなぼかし効果を加えたデザインスタイルです。
視認性を保ち、鮮やかな色彩を表現することができます。
どうやって作るのか
CSSで作る場合
透明度を設定する「background: rgba」と
ぼかしを設定する「backdrop-filter: blur」を利用します。
例)
background: rgba(255, 255, 255, 0.6);
→第4引数で透明度「0~1」(alpha値)を指定可能。※0:透明、1:不透明。
backdrop-filter: blur(50px);
→大きい値になるほどよりぼかしが強くなります。
デザインツールで作る場合
Adobe製品の「XD」や「After Effects」等であれば、より直感的な操作でグラスモーフィズムを構築できます。
CSS作ってみた
今回はCSSで作ってみました。
レイヤーの最下層の画像に
透明のレイヤーをかぶせて
ぼかしをいれる
これだけでお洒落な感じになりました(笑)
まとめ
Adobe製品の「XD」や「After Effects」にも興味があるので、いつか挑戦してみたいと思います!
では良いブログライフを^^
あったかくして寝ろよ~