CSSでインスタグラム風のフィルターが実装できる「Instagram.css」

CSS

CSSでインスタグラム風のフィルターが実装できる「Instagram.css」

2018年11月27日 8:00 

CSSでインスタグラム風のフィルターが実装できる「Instagram.css」

おはようございます!社員Aです👩

今回はCSSでインスタグラム風のフィルターが実装できる「Instagram.css」をご紹介します。



 

Photoshop要らず!? CSSでインスタグラム風のフィルターを実装

Instagramに入っているフィルタを使うと、素人が撮った写真でもそれっぽくおしゃれに仕上がりますよね!

今回ご紹介する「Instagram.css」を使うと、下記のようにCSSだけで写真をインスタ風におしゃれに加工できます。

上記は一例ですが、なんと全部で40種類以上のフィルタが使えます。

iPhoneやスマホで撮った写真でもこのスタイルシートを使えば一気にプロ仕様の写真に仕上がります。

 

インスタグラム風のフィルターが実装できる「Instagram.css」の使い方

ここからは「Instagram.css」の実装の流れをご説明します。

 

1.公式サイトからファイルをダウンロード

まずは公式サイトからファイルをダウンロードします。

公式サイトには全フィルタのデモも掲載されていますよ。

 

2.ダウンロードしたCSSを読み込む

ダウンロードした「instagram.min.css」をサイトの<head>〜</head>間に読み込みます。

パスはダウンロードした階層に合わせて読み込んでください。

 

3.写真にフィルタ加工する

写真にフィルタ加工するには、下記の形で囲みます。

imgタグを任意のタグで囲み、クラス「filter-[フィルタ名]」を付与することで、加工できます。

フィルタ別クラス一覧がありますので、下記を参照してください。

 



フィルタ別クラス一覧

フィルタ名 クラス名
1 1977 filter-1977
2 Aden filter-aden
3 Amaro filter-amaro
4 Ashby filter-ashby
5 Brannan filter-brannan
6 Brooklyn filter-brooklyn
7 Charmes filter-charmes
8 Clarendon filter-clarendon
9 Crema filter-crema
10 Dogpatch filter-dogpatch
11 Earlybird filter-earlybird
12 Gingham filter-gingham
13 Ginza filter-ginza
14 Hefe filter-hefe
15 Helena filter-helena
16 Hudson filter-hudson
17 Inkwell filter-inkwell
18 Kelvin filter-kelvin
19 Kuno filter-juno
20 Lark filter-lark
21 Lo-Fi filter-lofi
22 Ludwig filter-ludwig
23 Maven filter-maven
24 Mayfair filter-mayfair
25 Moon filter-moon
26 Nashville filter-nashville
27 Perpetua filter-perpetua
28 Poprocket filter-poprocket
29 Reyes filter-reyes
30 Rise filter-rise
31 Sierra filter-sierra
32 Skyline filter-skyline
33 Slumber filter-slumber
34 Stinson filter-stinson
35 Sutro filter-sutro
36 Toaster filter-toaster
37 Valencia filter-valencia
38 Vesper filter-vesper
39 Walden filter-walden
40 Willow filter-willow
41 X-ProII filter-xpro-ii

 



対応ブラウザについて

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

 

まとめ

手軽にクラス付与だけでインスタ風のフィルタが実装できるのが魅力的ですね。

IEはCSSのfilterが未サポートのため使えませんが、種類も豊富で今どきの写真加工ができるのが素晴らしい!

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!