HTMLコーディング

ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。
今更ながらあけましておめでとうございます。
作業がひと段落したので重い腰を上げて2018年1発目の記事を書こうと思います。

近頃街を歩いているとスマホで建物や友人同士で撮影している人を見かけと、「インスタに投稿するんかな?」と思います。
去年の流行語大賞で「インスタ映え」とノミネートされる位、いまではインスタグラムが生活の一部になってるなと感じます。

インスタグラムは撮影した写真を既に用意されているフィルターを適用する事で写真の見栄えを変えることが出来るので
自分好みの写真を自由自在に作ることが出来ます。
そして、そんなインスタグラム風な写真がスタイルシート1つでも再現できるようになりました。
今日はその方法をご紹介します。

「Instagram.css」でホームページをインスタ映えに

「Instagram.css」はclassを付けるだけで41種類ものフィルターを画像に適用する事が出来る便利なスタイルシートです。
使い方も非常に簡単です。GitHubから「Instagram.css」または「Instagram.min.css」をダウンロードして、スタイルシートを読み込ませます。
そして適用させたい画像を括っているdivやfigureに下記のようにclassを付け加えます。

<div class="filter-filter_name">
<img src="image.jpg">
</div>

class=”filter-[filter_name]の[filter_name]を適用したいフィルター名を入力します。
例えば1977年風のフィルターを適用すると、、、

<div class="filter-1977">
<img src="image.jpg">
</div>


(ちなみに写真は2年前西日本一高い「石鎚山」で撮影したものです)

他にも、こんな風にしたり

<div class="filter-skyline">
<img src="image.jpg">
</div>

このようにたった数行のコードを入力するだけで、インスタ風の画像に早変わりします。
現在用意されている41種類のフィルターのclass名は以下になります。

  • 1977 filter-1977
  • Aden filter-aden
  • Amaro filter-amaro
  • Ashby filter-ashby
  • Brannan filter-brannan
  • Brooklyn filter-brooklyn
  • Charmes filter-charmes
  • Clarendon filter-clarendon
  • Crema filter-crema
  • Dogpatch filter-dogpatch
  • Earlybird filter-earlybird
  • Gingham filter-gingham
  • Ginza filter-ginza
  • Hefe filter-hefe
  • Helena filter-helena
  • Hudson filter-hudson
  • Inkwell filter-inkwell
  • Kelvin filter-kelvin
  • Kuno filter-juno
  • Lark filter-lark
  • Lo-Fi filter-lofi
  • Ludwig filter-ludwig
  • Maven filter-maven
  • Mayfair filter-mayfair
  • Moon filter-moon
  • Nashville .filter-nashville
  • Perpetua filter-perpetua
  • Poprocket filter-poprocket
  • Reyes filter-reyes
  • Rise filter-rise
  • Sierra filter-sierra
  • Skyline filter-skyline
  • Slumber filter-slumber
  • Stinson filter-stinson
  • Sutro filter-sutro
  • Toaster filter-toaster
  • Valencia filter-valencia
  • Vesper filter-vesper
  • Walden filter-walden
  • Willow filter-willow
  • X-Pro II filter-xpro-ii

注意点としては、フィルターを適用した際自動的に「:before」疑似要素が追加されているので
すでに「:before」疑似要素を使用していると上手く適用されない可能性もありますのでご注意ください。

是非「Instagram.css」でインスタ映えするサイトにしてみてはいかがでしょうか。

スタイルシートのダウンロードはこちらから
https://picturepan2.github.io/instagram.css/

PS:夏までにインスタ映えするボディを作りたい、徳永でした。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  2. HTMLコーディング

    EC-CUBE3をローカル環境へインストールしてみよう

    寒い!((((;゚Д゚))))寒すぎてロードバイク諦めかけてるともさんです、こんにちわ。EC-CUBE3のテスト環境を作りたくて、どこに作…

  3. HTMLコーディング

    社内勉強会を行いました。

    こんにちわ、入社2ヶ月のともさんです。さて、去る9月16日(金)19:00~社内勉強会を行いました。テイクフォーでは初の勉強会となります。…

  4. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

  5. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールしてみよう

    あけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr…

  6. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lig…
  2. WEBデザイン

    よく見る方眼紙のようなパターンの作り方
  3. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方
  4. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法
  5. WEB集客

    「Googleトレンド」を使いこなして人気のキーワードと流行を把握しよう
PAGE TOP