CSSフィルターのライブラリー＆ツール13選！画像効果をデザインしよう

CSSフィルターはCSSプロパティの一種で、CSSの記述だけで写真やイメージ画像にPhotoshopで加工したような効果を与えることができます。
いままでPhotoshopを必要とした画像の加工は、CSSで可能になり時間の節約ができるようになりました。

この記事では、CSSフィルターをで画像効果を与えるためのライブラリーやツールをご紹介します。

CSSフィルターライブラリー

1. CSSGram By Una Kravets

CSSGramは、Instagramのような画像加工ができるライブラリーです。リンク先ではサンプルが用意されておりどのような加工ができるのか確認して使うことができます。クラスを指定するだけで簡単に画像にフィルターがかかります。

CSSGramでは、SASS（SCSS）の@mixinも使用可能です。

CSSGram

2. colofilter.css By Lucas Bonomi

colofilterは、Duotone（デュオトーン）のエフェクトを簡単につけることができます。
IE、Edge、Opera Mini、Safariには対応していません。

colofilter.css

3. CSSCO By Lauren Waller

CSSCOは、簡単にエフェクトをつけることができる写真フィルターのライブラリーです。マイクロソフト製のブラウザとSafariは一部のみサポートしています。

微妙な違いを見比べながら効果を選べるのがいいですね。

CSSCO

Webベースで使える効果ジェネレータ

4. cssFilters.co By Indrashish Ghosh

cssFiltersは、使いやすくてわかりやすいインターフェイスが特徴的です。
フィルターの調節はもちろん、画像をアップロードして好きな画像で試せます。CSS出力も可能です。

cssFilters

5. Filter Blend By Ilya Shubin

Filter Blendは、画像をアップロードして背景色やブレンドモードが使えます。Photoshopで行ってきた作業も、Filter Blendを使って行うことができます。

Filter Blend

6. CSSReflex Filter Effects By Naeem Noor

CSSReflex Filter Effectsは、スライダーで調節しながら各CSSフィルターがどのような効果を与えているのかを見ることができます。

CSSReflex Filter Effects

7. CSS Filter By Jordano Aragão

CSS Filterは、コードペン上にありますが写真にかけたフィルターをCSSとして出力する機能が実装されていて大変便利です。

CSS Filter

jQqueryを含むCSSフィルター

8. tiltShift.js By Noel Tock

tiltShift.jsは、チルトシフト風の写真に仕上げることができます。チルトシフトはアオリで遠景を写した、ミニチュアジオラマのような写真です。

tiltShift.js

9. Philter By Liudas Dzisevicius

Philterは、CSSフィルターを使用したホバーエフェクトの実装に適しています。HTMLのカスタムデータ属性を使用しており、ほかからの干渉を受けにくいのも特徴です。

Philter

10. Image Editor with CSS Filters and jQuery By SitePoint

Image Editor with CSS Filters and jQueryは、イメージ画像のURLを入力してブラウザ上でCSSフィルターをかけることができます。
コードペン上で機能していますが、複数のCSSフィルターを同時にかけて効果を確認することが可能です。

Image Editor with CSS Filters and jQuery

Github上にある便利なCSSフィルターツール

11. Postcss Instagram By Azat S.

Postcss Instagramは、PostCSSでInstagramのようなエフェクトをかけることができます。

Postcss Instagram

12. SassyFilters By Pascal Duez

SassyFiltersは、SASSを使用したクロスブラウザ対応のCSSフィルターです。CSS-SVGフィルタを使っています。

SassyFilters

13. CSS Filters DevTools Extension By Jaume Sanchez

CSS Filters DevTools Extensionは、Google Chrome DevToolsでCSSフィルターの編集用操作パネルを追加する拡張機能です。

CSS Filters DevTools Extension

まとめ

CSSフィルターは変更にも対応しやすく、非常に簡単に画像を加工できる方法です。
今まではPhotoshopを必要とした効果も、CSSフィルターを使うことで実装ができるようになりました。

ぜひ一度使ってみてください。

（翻訳：Yuri Tanaka）