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