画像にInstagramの様なエフェクトをかけれるCSSライブラリ「CSSgram」

Webサイトの画像にエフェクトをかけたい時はどうしていますか？

Webデザイナーなら画像ごと編集したり、
プログラマーならjQuery等のjavascriptプラグインで ...
恐らくそのような方法が多いと思います。

今回は、画像にインスタグラムで使われているような画像エフェクトが簡単にかけられる
CSSプラグイン「CSSgram」の紹介です。

CSSgram
 

このCSSgram、使い方は簡単でCSSをインポートして、figureタグにクラスをいれるだけで
簡単に 画像にエフェクトをかけることが出来ます。

<link href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css" rel="stylesheet" />

<figure class="エフェクト名">
  <img src="/path/to/image.jpg" />
</figure>

サポートブラウザ

- IE・Edge: ノンサポート
- Firefox: 38+
- Google Chrome: 43+
- Opera: 32+
- Safari: 8+

利用可能なエフェクトは16種類。
CSSを追加するだけなので既存のWebサイトにも容易に導入可能です。

また、CSSgramはスクリプト言語のSCSSで作られており、拡張も容易に出来るみたいです。

<!-- HTML -->
<figure class="viz--beautiful">
  <img src="../img.png">
</figure>

// Sass
.viz--beautiful {
  @extend %aden;
}

IEをサポートしていないところが残念なところですが、
electronでデスクトップアプリを作っている人や、
スマートフォン向けに専用テンプレートを使っているようなサイトでは簡単に利用可能です。

数種類のエフェクトを紹介したデモページも用意したので、是非チェックしてください！

Demo: CSSgram