ec-cube 普通の写真をインスタ映えな写真にする「instagram.css」

今流行りのinstagram。
写真をおしゃれにするフィルターも大きな特徴ですよね。
少し前までは、写真をそんなおしゃれ風にするためには、
画像加工ソフトであれこれ手を加えなければなりませんでした。

それが、スタイルシートでクラス名を変えるだけで色々なフィルターを追加できます!
今回は、普通の写真も一気にinstagram風なおしゃれ写真に変える「instagram.css」をご紹介します。

ヘッダーにinstagram.cssを追加する

instagram.cssは、こちらのサイトから入手できます。

>>instagram.css

そして、ヘッダー内にCSSを記述します。

HTML

<link rel="stylesheet" href="instagram.css">

フィルターをつけたい画像をdiv等で囲み、classを付与します。


<div class="filter-フィルター名">
  <img src="image.jpg">
</div>

これでOK。
とっても簡単ですね!

実際にフィルターをいくつか適用してみたものがこちらです↓↓

【元の画像】

【1977】

【Amaro】

【Brooklyn】

【Inkwell】

【Reyes】

【X-Pro Ⅱ】