クラス名を指定するだけで、簡単にインスタグラム風のフィルターを付与してくれる、「instagram.css」

IdeARefect. ブログ カテゴリ:Webサイト コーディング

Instagram.cssは、インスタグラム風のフィルターをクラス名の指定ひとつで、付与してくれる便利・簡単・お洒落なスタイルシートです。
フィルターの種類も多く、今後も追加されていく予定らしいので、楽しみですね!
簡単に効果を付与する事ができるので、ブログなどでも気軽に採用できそうです。

対応ブラウザ

  • Chrome (18+)
  • Microsoft Edge (13+)
  • Firefox (35+)
  • Safari (6+)
  • Opera (15+)

実装方法

以下より、ダウンロード

GitHub
https://github.com/picturepan2/instagram.css

ヘッド内で読み込み

<link rel="stylesheet" href="instagram.css">

imgをラップする要素に、filter-[フィルターの名前を入れる]クラスを付与。

<figure class="filter-[filter-name]">
  <img src="img/instagram.jpg">
</figure>
公式デモ
https://picturepan2.github.io/instagram.css/
自作デモ
https://idearefect.jp/blog/demo/2018-02-03/

ページ上部へ

お問い合わせ

お見積りやご相談など、お問い合わせフォームより、お気軽にお問い合わせ下さい。
内容を確認させて頂き、1~3営業日中に返信をさせて頂きます。

Contact Form