ディテールと演出 · 仕上げの小技
段階的なぼかし渐进模糊
- 端ほどぼける
- 柔らかい境目
- 硬く切らない
ぼかしは均一ではなく、片側の完全な鮮明から反対側の完全なぼけまで段階的に強くなり、複数層の重ねで作ります。溢れる行の両端やスクロール領域の上下端に使います。内容は切り取られるのではなく、焦点の外へ退いていきます。
使いどころ
横に溢れるチップの列の両端、カードリストの端、固定バーと内容の間の移行に使います。必ずマスクと併用してください。グラデーションマスクが無いと、ぼかし層の境目がはっきりした直線になり、ぼかさないより醜くなります。
パラメータ
5 stacked backdrop-filter layers · blur 0→8px stepped · mask-image: linear-gradient · static, no animation
レシピ
段階的なぼかし → 5 stacked backdrop-filter layers · blur 0→8px stepped · mask-image: linear-gradient · static, no animation
AI に渡す一文
段階的なぼかしを作ってください。backdrop-filter を 5 層重ね、blur をそれぞれ 1、2、4、6、8px にし、各層を mask-image: linear-gradient で自分の帯域だけに見せます（少し重ねます）。合わせて鮮明からぼけた状態への連続した坂になります。静的で、動かさないでください。4 層未満だと段差が見えます。