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

Ads by Google

Instagram.css

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

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

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

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

使い方は簡単で、ダウンロードした[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]は、より多くのフィルターが選べるようになっています。

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

  • 1977 filter-1977
  • Aden filter-aden
  • Amaro filter-amaro
  • Ashby filter-ashby
  • Brannan filter-brannan
  • Brooklyn filter-brooklyn
  • Charmes filter-charmes
  • Clarendon filter-clarendon
  • Crema filter-crema
  • Dogpatch filter-dogpatch
  • Earlybird filter-earlybird
  • Gingham filter-gingham
  • Ginza filter-ginza
  • Hefe filter-hefe
  • Helena filter-helena
  • Hudson filter-hudson
  • Inkwell filter-inkwell
  • Kelvin filter-kelvin
  • Kuno filter-juno
  • Lark filter-lark
  • Lo-Fi filter-lofi
  • Ludwig filter-ludwig
  • Maven filter-maven
  • Mayfair filter-mayfair
  • Moon filter-moon
  • Nashville filter-nashville
  • Perpetua filter-perpetua
  • Poprocket filter-poprocket
  • Reyes filter-reyes
  • Rise filter-rise
  • Sierra filter-sierra
  • Skyline filter-skyline
  • Slumber filter-slumber
  • Stinson filter-stinson
  • Sutro filter-sutro
  • Toaster filter-toaster
  • Valencia filter-valencia
  • Vesper filter-vesper
  • Walden filter-walden
  • Willow filter-willow
  • X-Pro II filter-xpro-ii

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

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

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google