CSSでインスタグラム風の写真加工が簡単にできる「instagram.css」を試してみた。

CSSでインスタグラム風の写真加工が簡単にできる「instagram.css」を試してみた。レトロっぽい写真などが簡単にできる。

「instagram.css」は、以下からダウンロードできる。

使い方は簡単。「instagram.css」を以下のようにリンクして、

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

<img>を<div>で囲んで、classにフィルター名を指定するだけ。

<div class="filter-[filter-name]">
	<img src="img/xxx.jpg">
</div>

指定例。

<div class="filter-amaro">
	<img src="img/xxx.jpg">
</div>

「instagram.css」を使ったサンプルページを作成した。

以下は上記サンプルページの画像抜粋。

サンプルページの各画像をクリックすると、枠付きの加工写真がポップアップ表示される。