glassmophism

CSS
background-color: transparent;
backdrop-filter: blur(20px);

Effective Website

化粧品サイトのように「透明感・清潔感・みずみずしさ」を出したいウェブサイト

Effective Component

・画面に追従するナビゲーション(ボトム、トップ):画面スペースが限られているスマホでは、透明なナビゲーションを使うことで奥行き感が生まれ、コンテンツをより広く感じることができます。また、スクロールするたびに背景色が変わるので、ユーザーの目を引きやすくなります。

Caution

背景画像が鮮やかでないと効果が薄れます

BACK