CSS
CSSでインスタグラム風のフィルターが実装できる「Instagram.css」
2018年11月27日 8:00
おはようございます！社員Aです👩
今回はCSSでインスタグラム風のフィルターが実装できる「Instagram.css」をご紹介します。
もくじ
Photoshop要らず!? CSSでインスタグラム風のフィルターを実装
Instagramに入っているフィルタを使うと、素人が撮った写真でもそれっぽくおしゃれに仕上がりますよね！
今回ご紹介する「Instagram.css」を使うと、下記のようにCSSだけで写真をインスタ風におしゃれに加工できます。
上記は一例ですが、なんと全部で40種類以上のフィルタが使えます。
iPhoneやスマホで撮った写真でもこのスタイルシートを使えば一気にプロ仕様の写真に仕上がります。
インスタグラム風のフィルターが実装できる「Instagram.css」の使い方
ここからは「Instagram.css」の実装の流れをご説明します。
1.公式サイトからファイルをダウンロード
まずは公式サイトからファイルをダウンロードします。
公式サイトには全フィルタのデモも掲載されていますよ。
2.ダウンロードしたCSSを読み込む
ダウンロードした「instagram.min.css」をサイトの<head>〜</head>間に読み込みます。
<link rel="stylesheet" href="css/instagram.min.css">
パスはダウンロードした階層に合わせて読み込んでください。
3.写真にフィルタ加工する
写真にフィルタ加工するには、下記の形で囲みます。
<figure class="filter-[filter-name]"> <img src="assets/img/instagram.jpg"> </figure>
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
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
