2018/02/12
CSSだけでInstagramのようなフィルター加工ができる、「Instagram.css」の使い方
本サイトでもよく紹介に上がる「Instagram」。写真に加工を一手間加えるだけで味が出ますよね。
そんな写真加工をCSSだけでできる「Instagram.css」についてご紹介したいと思います。
Instagram.cssには41種類のフィルターが用意されているので簡単に加工が施せます。
導入手順もあっという間で、とりあえず加工の色合いを見てみたい方にもおすすめです。
対応ブラウザ
1点注意として、IE（インターネットエクスプローラー）は対象外となっております。
その他のブラウザの、Google Chrome、Firefox、Opera、Safariが対応しているので確認する際はご注意ください。
導入手順
まずは公式サイトから、CSSファイルをダウンロードしましょう。
GithHubからダウンロードをして
ダウンロードしたzipファイルを解凍し、入手したCSSのファイル「instagram.css」をHTMLの＜head＞～＜/head＞内で読み込みます。
※CSSが圧縮された、「instagram.min.css」でもOK！
<head> <link rel="stylesheet" href="instagram.css"> </head>
フィルターの種類
あとはフィルターを施したい画像をhtml要素で囲み、クラスを付与します。
<img src="img/pic_01.jpg" alt="" class="class="filter-[filter-name]">
[filter-name]の部分に入るものは以下になります。
- filter-1977
- filter-aden
- filter-amaro
- filter-brannan
- filter-brooklyn
- filter-charmes
- filter-clarendon
- filter-crema
- filter-dogpatch
- filter-earlybird
- filter-gingham
- filter-ginza
- filter-hefe
- filter-helena
- filter-hudson
- filter-inkwell
- filter-kelvin
- filter-juno
- filter-lark
- filter-lofi
- filter-ludwig
- filter-maven
- filter-mayfair
- filter-moon
- filter-nashville
- filter-perpetua
- filter-poprocket
- filter-reyes
- filter-rise
- filter-sierra
- filter-skyline
- filter-slumber
- filter-stinson
- filter-sutro
- filter-toaster
- filter-valencia
- filter-vesper
- filter-walden
- filter-willow
- filter-xpro-ii
公式サイトの方にフィルター名と色合いが一緒に載っているので、好みのフィルターのクラス名を探してみてください。
実際に使用してみたのがこちらになります。
■filter-1977
■filter-mayfair
■filter-crema
何も加工を施していないものと比べてみると、一気におしゃれ度が増しました！
写真加工の参考にも是非試してみてください。
あわせてこちらの記事もどうぞ♪
難しい審査はナシ！Instagramの写真をWebサイトへ表示する方法
トーンカーブで簡単！Photoshopでインスタ風写真を作ろう
コーディング業務のご依頼、ご相談の詳細についてはこちらから
最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。
| 次の記事へ | 前の記事へ |
WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。
