【CSS】インスタグラムみたいな加工ができるライブラリ!「CSSGram」

最近色々なCSSライブラリが出てきていて、もう自分でやることがないわって感じですが、今回はそんな便利なCSSライブラリの一つ「CSSGram」をご紹介します。名前の通りInstagramみたいな加工を画像にフィルターをかけることで実現しています。

対応ブラウザ

・Google Chrome: 43+
・Opera: 32+
・Mozilla Firefox: 38+
・Safari: 8+
・Internet Explorer: ×

IEが対応していないのがネックですが他のモダンブラウザでは使用できるので「IEは無視」という方はバンバン使用しちゃってください。

使い方

・CDNで読み込み
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"><head> タグ内に追加。

・CSSのクラスを付与する
figureエレメントにクラスに追加するだけでお好みの加工ができます。

Sample

これだけでInstagramみたいな加工を元画像に手を加えずに表現できるので、結構便利に使えそうですね。下記にフィルターを使用した際のイメージを貼っておきますのでご覧ください。結構色々なフィルターがあるのでこれひとつ読みこむだけで色々な画像フィルターを試すことができますね。
cssgram-sample (1)

この便利なライブラリぜひ一度使用してみてください。あと、よかったらシェアお願いします。記事を書く励みになりますので。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。