CSSフィルターはCSSプロパティの一種で、CSSの記述だけで写真やイメージ画像にPhotoshopで加工したような効果を与えることができます。
いままでPhotoshopを必要とした画像の加工は、CSSで可能になり時間の節約ができるようになりました。
この記事では、CSSフィルターをで画像効果を与えるためのライブラリーやツールをご紹介します。
CSSフィルターライブラリー
1. CSSGram By Una Kravets
CSSGramは、Instagramのような画像加工ができるライブラリーです。リンク先ではサンプルが用意されておりどのような加工ができるのか確認して使うことができます。クラスを指定するだけで簡単に画像にフィルターがかかります。
CSSGramでは、SASS（SCSS）の@mixinも使用可能です。
2. colofilter.css By Lucas Bonomi
colofilterは、Duotone（デュオトーン）のエフェクトを簡単につけることができます。
IE、Edge、Opera Mini、Safariには対応していません。
3. CSSCO By Lauren Waller
CSSCOは、簡単にエフェクトをつけることができる写真フィルターのライブラリーです。マイクロソフト製のブラウザとSafariは一部のみサポートしています。
微妙な違いを見比べながら効果を選べるのがいいですね。
Webベースで使える効果ジェネレータ
4. cssFilters.co By Indrashish Ghosh
cssFiltersは、使いやすくてわかりやすいインターフェイスが特徴的です。
フィルターの調節はもちろん、画像をアップロードして好きな画像で試せます。CSS出力も可能です。
5. Filter Blend By Ilya Shubin
Filter Blendは、画像をアップロードして背景色やブレンドモードが使えます。Photoshopで行ってきた作業も、Filter Blendを使って行うことができます。
6. CSSReflex Filter Effects By Naeem Noor
CSSReflex Filter Effectsは、スライダーで調節しながら各CSSフィルターがどのような効果を与えているのかを見ることができます。
7. CSS Filter By Jordano Aragão
CSS Filterは、コードペン上にありますが写真にかけたフィルターをCSSとして出力する機能が実装されていて大変便利です。
jQqueryを含むCSSフィルター
8. tiltShift.js By Noel Tock
tiltShift.jsは、チルトシフト風の写真に仕上げることができます。チルトシフトはアオリで遠景を写した、ミニチュアジオラマのような写真です。
9. Philter By Liudas Dzisevicius
Philterは、CSSフィルターを使用したホバーエフェクトの実装に適しています。HTMLのカスタムデータ属性を使用しており、ほかからの干渉を受けにくいのも特徴です。
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のようなエフェクトをかけることができます。
12. SassyFilters By Pascal Duez
SassyFiltersは、SASSを使用したクロスブラウザ対応のCSSフィルターです。CSS-SVGフィルタを使っています。
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）
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Way back in October 2007, we initially launched Speckyboy as a small inspirational site for web designers.
この記事はspeckyboyからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
15 CSS Image Filter Libraries & Tools
