晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

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」を使ったサンプルページを作成した。

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

f:id:art2nd:20200331105938j:plain

f:id:art2nd:20200331105941j:plain

f:id:art2nd:20200331105943j:plain

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

f:id:art2nd:20200331111712j:plain