CSSgramを利用してみた

CSSgramはInstagram風のフィルタを使って直接画像を編集するライブラリです。公式では、画像をfigureタグで囲んで使用することが推奨されています。ただし、Internet Exploreはサポート対象外なので注意が必要です。ここではCSSgramについて解説していきます。

01: インストール

bash


# 作業ディレクトの作成/移動
$ mkdir JS0601-CSSgram
$ cd JS0601-CSSgram

# CSSgramをダウンロード
$ git clone https://github.com/una/CSSgram

# サンプルコードを作成する。
$ nano index.html

index.html


<html>
  <head>
    <link rel="stylesheet" href="CSSgram/source/css/cssgram.min.css">
    <!-- <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css -->
  </head>
  <body>
    <figure class="toaster">
      <img src="image.png">
    </figure>
  </body>
</html>

02: 動作テスト

ブラウザで作成したindex.htmlにアクセスすることで、確認用のダイアログを表示できる。class属性値に「toaster」と記述された画像はToasterエフェクトがかけられて表示されます。