[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート

背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。

例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。

ブラーエフェクトを使ったデザイン

Blur Experiments

上記のブラーエフェクトは、ピュアCSSで実装できます。

ブラーエフェクトには、さまざまな使い方があります。
ぼかすエリアとくっきりさせるエリアを反転させただけでも印象は変わります。

ブラーエフェクトを使ったデザイン

サイドバーのように使用するのもアリですね。

ブラーエフェクトを使ったデザイン

パステルカラーと合わせるとiOSのようなデザインになります。

ブラーエフェクトを使ったデザイン

OS XのEl Capitanはこんな感じでした。

ブラーエフェクトを使ったデザイン

半透明のブラーをボタンに適用すると、文字が非常にクリアに見えます。

ブラーエフェクトを使ったデザイン

ブラーのエフェクトはホワイトやブラックを混ぜると、印象が変わります。

ブラーエフェクトを使ったデザイン

実際のデモやコードは、下記ページをご覧ください。

See the Pen Blur Experiments by Alex Moore (@MoorLex) on CodePen.

top of page

©2018 coliss