[CSS]これはスゴイぞ!写真の仕上がりをインスタグラム風にかっこよく、かわいくするスタイルシート -CSSgram
Post on:2015年10月27日
写真をかわいくするのに、特別なソフトウェアは必要なくなるかもしれません。
普通の写真にスタイルシートを一行追加するだけで、インスタグラム風にかっこよく、そしてかわいく仕上げるスタイルシート「CSSgram」を紹介します。

かわいい文鳥たち: フィルター「Walden」
上の画像は元画像にCSSgramのスタイルシートを適用したもので、適用していない元画像は下です。

かわいい文鳥たち: 元画像
文鳥たちはmamimoonさん作品の僕のコレクションです。
CSSgramを使用するとインスタグラム風のさまざまなフィルターが簡単に使え、普通の画像をいい感じに仕上げることができます。

CSSgramの使い方は、簡単です。
Step 1: 外部ファイル
当スクリプトを外部ファイルとして、記述します。
1 2 3 4 |
<head> ... <link rel="stylesheet" href="css/cssgram.min.css"> </head> |
Step 2: CSSgramを画像に適用
あとは、画像に適用したいCSSgramのフィルターをclassで記述するだけです。
1 2 3 4 5 6 7 |
<figure class="aden"> <img src="../img.png"> </figure> <!-- もしくは --> <img class="aden" src="../img.png"> |
対応ブラウザは、Chrome 43+, Firefox 38+, Opera 32+, Safari 8+で、IEはCSSのfilterが未サポートとなっています。
CSSgramではフィルターが数多く用意されており、その中からいくつか紹介します。
※写真の掲載にあたり、mamimoonさんの許諾を得ています。

コンクリートに乗った文鳥: フィルター「Aden」
コンクリートと文鳥がセットになった作品。数を揃えたい逸品です。

パンプキン文鳥: フィルター「Reyes」
世間はちょうどハロウィン、今にも文鳥が生まれて出てきそう。

コロネ文鳥: フィルター「Perpetua」
コロネのバリエーションがいつの間にか増えてる!

みたらし文鳥: フィルター「Xpro2」
とてもおいしそうですが、サイズが小さいので間違えて食べてしまう心配はないです。

アイスキャンディ文鳥: フィルター「Toaster」
ちょっと溶けてる、、、

タコさんウインナー文鳥: フィルター「Walden」
文鳥なのか、タコなのか、いやウインナーかw

おでん文鳥: フィルター「Hudson」
これはちょっと味がしみてるバージョン。

りんご飴文鳥: フィルター「Gingham」
りんごの芯にこだわりが!

お月見団子文鳥: フィルター「Mayfair」
月見団子をこんな風にすると、楽しそう!

枝豆文鳥: フィルター「Lofi」
超レアの寝顔バージョンです(作者談)。

枝豆文鳥: フィルター「Inkwell」
白黒写真にするフィルターもあります。
mamimoonさんの文鳥たちは、今だと文鳥まつり(10/23-10/28)で販売されています。あとは、通販とか東急ハンズとかの催事にも出店されていますね。
sponsors