view_mode =

1/

all_categories=

PC表示

画面下部が常にふわっとしたフィルターが掛かっており、Phoneの通知欄を表示する際の背景の表現に似ている。

複数重ねたブロックにCSSのbackdrop-filterをズラして重ねることで、独特なグラデ―ションのような効果を生み出している。

ウェブサイトに使用するのは珍しいが、個人的にはとても魅力的な効果に思う。

スマホ表示

SP版では画面の小ささを考慮し、画面下ではなくヘッダーの背景に効果を付けるよう変更されている。

スマートフォン本体に似た効果を付けることで、違和感なくより自然に魅せている。

Charlie Osborne

https://www.charlieosborne.co