CSSgramを使ったデモ

CSSgram は CSSのみで画像にフィルターをかけることが出来るライブラリです

npm i cssgram --save

yarn add cssgram

bower install cssgram

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

ベースにする画像

<!-- ライブラリの読み込み -->
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

adenフィルターを適応

<!-- adenフィルターを適用 -->
<figure class="aden">
  <img src="/path/to/image ">
</figure>

earlybirdフィルターを適応

<!-- earlybirdフィルターを適用 -->
<figure class="earlybird">
  <img src="http://co.bsnws.net/assets/img/rgb-flickr00.jpg">
</figure>

toasterフィルターを適応

<!-- toaster -->
<figure class="toaster">
  <img src="/path/to/image ">
</figure>

moonフィルターを適応

<!-- moon -->
<figure class="moon">
  <img src="/path/to/image ">
</figure>

larkフィルターを適応

<!-- lark -->
<figure class="lark">
  <img src="/path/to/image ">
</figure>