CSSで画像に磨りガラスのパネルを重ねたり、フィルター効果を適用するだけのシンプルなライブラリ -filters.css
Post on:2020年9月28日
さまざまなフィルター効果を画像に適用できるCSSのライブラリを紹介します。
JavaScriptは一切無しで、classを付与するだけで簡単に利用できます。
画像に磨りガラスのパネルを重ねたり、白黒やセピア色にしたり、さまざまなフィルター効果をサポートしています。

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

- JavaScriptは無し、CSSのみのライブラリ。
- 1Kbで、超軽量。
- すべてのモダンブラウザをサポート。
- SCSSで構築されています。
- ホバーもサポート。
- MITライセンスで、商用プロジェクトでも無料で利用できます。
filters.cssのデモ
filters.cssの各フィルターの動作は、デモページで楽しめます。

filters.cssの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
1 |
<link href="filters.min.css" rel="stylesheet"> |
CSSファイルは、CDNでも提供されています。
1 |
<link href="https://unpkg.com/filters.css" rel="stylesheet"> |
npmでもインストールできます。
1 |
npm install filters.css |
Step 2: HTML
あとは、画像にclassを与えるだけです。
1 |
<img src="..." class="blur-3"> |
filters.cssには、9種類のエフェクトに、0-10の度合いを利用できます。また、ホバー時にエフェクトを与えることもできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<img src="..." class="blur-0"> <img src="..." class="blur-1"> <img src="..." class="blur-2"> <img src="..." class="blur-3"> <img src="..." class="blur-4"> <img src="..." class="blur-5"> <img src="..." class="blur-6"> <img src="..." class="blur-7"> <img src="..." class="blur-8"> <img src="..." class="blur-9"> <img src="..." class="blur10"> <img src="..." class="hover-blur-1"> |
9種類のエフェクトは、下記の通りです。

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

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

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

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

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

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

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

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

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