お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装

いま若者を中心に流行中のインスタグラムですが、投稿する写真を美しく際立たせるフィルター機能は、人気の秘訣でもあり大きな特徴の１つになっています。

今日ご紹介する［Instagram.css］は、ウェブサイトで使用している画像にインスタグラムと同じようなフィルターを施せる便利なCSSのライブラリー。

お手軽にインスタグラム風の写真を再現することができます。

実装したサンプル : https://on-ze.com/demo/css-instagram.css/

使い方は簡単で、ダウンロードした［Instagram.css］のライブラリを読み込み、任意の画像を包括する要素に特定のクラス名を付与するだけ。初心者の方でも難なく扱えます。

以下が公式の配布サイトになりますので、まずはファイルをダウンロードしてきましょう。

Instagram.css : https://picturepan2.github.io/instagram.css/
GitHub : https://github.com/picturepan2/instagram.css

入手したCSSのファイル「instagram.css」をHTMLの<head> 〜 </head>内で読み込みます。

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

これで準備完了。
あとはフィルターを施したい画像を適当なhtml要素で囲み、
class="filter-[filter-name]"を記述します。

ここでは仮に「Vesper」フィルターを使ってみます。

<figure class="filter-vesper">
	<img src="/images/instagram.png">
</figure>

「instagram.css」のコードを見てみると、CSS3のfilter機能をメインに、グラデーションオーバーレイ、ブレンド、透明化などのテクニックを駆使していることが分かり、とても参考になります。

制作者様によると、同じ働きをする［CSSgram］というライブラリからインスピレーションを得て開発したそうです。しかし［CSSgram］は開発が終了しているためか更新が止まっているのが現状で、後発の［Instagram.css］は、より多くのフィルターが選べるようになっています。

用意されているフィルターのリストは次のとおり。

全部で40以上。これだけあれば充分ですね！

ブラウザサポートは「Chrome (18+)」「Microsoft Edge (13+)」「Firefox (35+)」「Safari (6+)」「Opera (15+)」となっており、Internet Explorer には未対応。

ダウンロードは以下より。
簡単ですのでちょっと遊んでみてはいかがでしょう？

Instagram.css : https://picturepan2.github.io/instagram.css/
GitHub : https://github.com/picturepan2/instagram.css

ONZE/BLOGオンズ開発ブログ