簡単なのにすごい！普通の写真をインスタ映えする写真にできるスタイルシート -Instagram.css

写真画像にインスタ映えするフィルタを適用するスタイルシートを紹介します。
使い方は簡単で、外部スタイルシートと画像にclassを加えるだけでOKです。

42種類のフィルタが用意されており、どのフィルタでも簡単に利用できます。

かわいい文鳥のアクセサリ: 適用フィルタ「Lo-Fi」

上の画像はInstagram.cssのフィルタを適用したもので、元画像はこちら。

かわいい文鳥のアクセサリ: 元画像

画像の文鳥は@mamimoonさんの作品で、文鳥祭りなどの催事やオンラインショップで入手できます。入荷しても、すぐに売り切れてしまいます。

CSSのフィルタは、Instagram.cssです。インスタグラム風のフィルタが42種類用意されており、画像にclassを加えるだけで簡単に適用できます。

Instagram.css
Instagram.css -GitHub

使い方は、簡単です。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

.scssファイルも用意されており、カスタマイズも簡単です。

Step 2: HTML

あとは、画像に適用したいフィルタのclassを加えるだけです。
フィルタの名前には、「filter-lofi」などを記述します。

figure要素でなく、div要素などでもOKです。

サポートブラウザ

対応ブラウザは、Chrome 18+, Edge 13+, Firefox 35+, Opera 15+, Safari 6+で、IEはCSSのfilterが未サポートとなっています。

実際にInstagram.cssのフィルタを適用してみました。
新作文鳥と共にお楽しみください！
※画像の掲載にあたり、@mamimoonさんの許諾を得ています。

適用フィルタ「1977」

いくらの軍艦巻きに紛れ込んだ文鳥。

適用フィルタ「Amaro」

花瓶文鳥、かすみ草が挿してあります。

適用フィルタ「Brannan」

おでんがおいしい季節に、おでん文鳥も欠かせません。こんにゃくとちくわに挟まれています。

適用フィルタ「Charmes」

おでん文鳥にはレアのからし付きもあります。

適用フィルタ「Crema」

定番のおでん文鳥と枝豆文鳥には、マグネット版も！
けっこうしっかりくっつきます。

適用フィルタ「Earlybird」

桜餅団子文鳥、みたらし団子シリーズの進化系。

適用フィルタ「Ginza」

たこ焼き文鳥は数を揃えて、並べたいですね。

適用フィルタ「Helena」

オムライスに添えられた文鳥。付け合わせ的な存在です。

適用フィルタ「Inkwell」

タコさんウインナー文鳥。フィルタは白黒ですが、ウインナーのあの色になっています。

適用フィルタ「Juno」

鏡餅文鳥とみたらし団子文鳥。来年の正月にいかがですか？

適用フィルタ「Lo-Fi」

すこし溶けかかってるアイスキャンディー文鳥。

適用フィルタ「Maven」

コロネ文鳥はたくさん集めたい逸品です。

適用フィルタ「Moon」

たくさんの枝豆にこっそり忍び込ませたい枝豆文鳥。

適用フィルタ「Perpetua」

枝豆文鳥の激レア、寝顔バージョン。現存は一つだけ！

適用フィルタ「Reyes」

コロネ文鳥はクリーム、チョコ、春色など、さまざまなバリエーションがあります。

適用フィルタ「Sierra」

みたらし文鳥たくさん！

適用フィルタ「Slumber」

青りんご飴文鳥、りんごの芯付きです。

適用フィルタ「Sutro」

お部屋のインテリアにもぴったりな文鳥。