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

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

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

Blur Experiments

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

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

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

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

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

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

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

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