写真にInstagram風のフィルターを適用することができる「CSSgram」

写真にInstagram風のフィルターを適用することができる「CSSgram」

写真にInstagram風のフィルターを適用することができる「CSSgram」

CSSgramは、写真にInstagram風のフィルターをかけることができるCSSライブラリです。簡単にサイト内の写真をおしゃれに仕上げることができます。

デモについては、CSSgramの配布ページをご参照ください。

CSSgramの使い方

<head>~</head>内に以下を記述して、CSSファイルを読み込みます。

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

配布ページからダウンロードして使用することも可能です。

CSSファイルを読み込んだら、写真に適用したいフィルターのクラスを指定します。

<figure class="moon">
 <img src="../img.png">
</figure>

もしくは、

<img class="moon" src="../img.png">

上記の例だと、Moonというフィルターが適用されます。

指定できるクラスは以下の通りです。

1977: class=”_1977″
Aden: class=”aden”
Brooklyn: class=”brooklyn”
Clarendon: class=”clarendon”
Earlybird: class=”earlybird”
Gingham: class=”gingham”
Hudson: class=”hudson”
Inkwell: class=”inkwell”
Lark: class=”lark”
Lo-Fi: class=”lofi”
Mayfair: class=”mayfair”
Moon: class=”moon”
Nashville: class=”nashville”
Perpetua: class=”perpetua”
Reyes: class=”reyes”
Rise: class=”rise”
Slumber: class=”slumber”
Toaster: class=”toaster”
Walden: class=”walden”
Willow: class=”willow”
X-pro II: class=”xpro2″

あとがき

フィルターをかけるだけで、全然印象が違いますね。

サイト内の写真をおしゃれに仕上げたい時にぜひ!

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です