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

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

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

さまざまなフィルター効果を画像に適用できるCSSのライブラリ

filters.css
filters.css -GitHub

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-filterblur()をかけて、磨りガラス効果を与えます。

デモのキャプチャ

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

sponsors

top of page

©2020 coliss