CSSで画像に磨りガラスのパネルを重ねたり、フィルター効果を適用するだけのシンプルなライブラリ -filters.css

さまざまなフィルター効果を画像に適用できるCSSのライブラリを紹介します。
JavaScriptは一切無しで、classを付与するだけで簡単に利用できます。

画像に磨りガラスのパネルを重ねたり、白黒やセピア色にしたり、さまざまなフィルター効果をサポートしています。

filters.css
filters.css -GitHub

• filters.cssの特徴
• filters.cssのデモ
• filters.cssの使い方

filters.cssの特徴

filters.cssは、さまざまなフィルター効果を画像に簡単に適用できるCSSのライブラリです。

filters.css

• JavaScriptは無し、CSSのみのライブラリ。
• 1Kbで、超軽量。
• すべてのモダンブラウザをサポート。
• SCSSで構築されています。
• ホバーもサポート。
• MITライセンスで、商用プロジェクトでも無料で利用できます。

filters.cssのデモ

filters.cssの各フィルターの動作は、デモページで楽しめます。

filters.css

filters.cssの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

CSSファイルは、CDNでも提供されています。

npmでもインストールできます。

Step 2: HTML

あとは、画像にclassを与えるだけです。

filters.cssには、9種類のエフェクトに、0-10の度合いを利用できます。また、ホバー時にエフェクトを与えることもできます。

9種類のエフェクトは、下記の通りです。

blurのデモ
blur()のフィルターをかけて、画像をぼかします。

grayscaleのデモ
grayscale()のフィルターをかけて、画像をグレースケールの白黒にします。

brightnessのデモ
brightness()のフィルターをかけて、画像の明度を変更します。0%で黒です。

contrastのデモ
contrast()のフィルターをかけて、画像のコントラストを調整します。

invertのデモ
invert()のフィルターをかけて、画像のカラーを反転させます。

saturateのデモ
saturate()のフィルターをかけて、画像の彩度を調整します。

sepiaのデモ
sepia()のフィルターをかけて、画像をセピア色にします。

backdrop-blurのデモ
backdrop-filterのblur()をかけて、磨りガラス効果を与えます。

opacityのデモ
opacity()のフィルターをかけて、画像の透過度を調整します。