最近色々な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
<figure class="aden">
<img src="../img.png">
</figure>
これだけでInstagramみたいな加工を元画像に手を加えずに表現できるので、結構便利に使えそうですね。下記にフィルターを使用した際のイメージを貼っておきますのでご覧ください。結構色々なフィルターがあるのでこれひとつ読みこむだけで色々な画像フィルターを試すことができますね。
この便利なライブラリぜひ一度使用してみてください。あと、よかったらシェアお願いします。記事を書く励みになりますので。
