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コーディング

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

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

  2. HTMLコーディング

    cssでグラデーションを描いてみよう

    年末に向けていろいろと身辺周りが慌ただしくなってきましたね。こんにちは、ともさんです( ^ω^ )グラデーションをcssで描けることはもう…

  3. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方

    日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。ともさんです。久しぶりに業務でベーシック認証(Basic認証)をか…

  4. HTMLコーディング

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

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

  5. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

  6. HTMLコーディング

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. WEBデザイン

    色相環でグラデーションを描いてみよう
  2. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  3. レポート

    モンストフェスティバル2015に行ってきました。
  4. WEBデザイン

    【Photoshop】ボタントレース方法
  5. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)
PAGE TOP