画像に Instagram風のエフェクトを追加できるスタイルシート「CSSgram」!

2015/11/26

こんにちは。
今回は画像に Instagram風のエフェクトを追加できるスタイルシート「CSSgram」!です。

簡単に画像にInstagram風のエフェクトを追加できる便利なライブラリを紹介したいと思います。
対応ブラウザはGoogle Chrome: 43+、Mozilla Firefox: 38+、Opera: 32+、Safari: 8+、
IEは未対応となっています。

画像に Instagram風のエフェクトを追加できるスタイルシート「CSSgram」!

CSSgram

cssgram

http://una.im/CSSgram/

 

「CSSgram」の使い方!

https://github.com/una/CSSgramにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

先ほどダウンロードしたcssgram.min.cssをhead内に読み込みます。

 

html部分を記述します。
かけたいフィルターによってクラス名を変更します。

 

フィルターは17種類用意されています。
順番に見ていきましょう!

 

nofilter

cssgram

こちらの足がすくんでしまいそうな画像にエフェクトを適応していきます。

 

Aden

cssgram

adenというクラス名をつけます。

 

Reyes

cssgram

reyesというクラス名をつけます。

 

Perpetua

cssgram

perpetuaというクラス名をつけます。

 

Inkwell

cssgram

inkwellというクラス名をつけます。

 

Earlybird

cssgram

earlybirdというクラス名をつけます。

 

Toaster

cssgram

toasterというクラス名をつけます。

 

Walden

cssgram

waldenというクラス名をつけます。

 

Hudson

cssgram

hudsonというクラス名をつけます。

 

Gingham

cssgram

ginghamというクラス名をつけます。

 

Mayfair

cssgram

mayfairというクラス名をつけます。

 

Lo-Fi

cssgram

lofiというクラス名をつけます。

 

X-Pro2 II

cssgram

xpro2というクラス名をつけます。

 

1977

cssgram

_1977というクラス名をつけます。

 

Brooklyn

cssgram

brooklynというクラス名をつけます。

 

Nashville

cssgram

nashvilleというクラス名をつけます。

 

Lark

cssgram

larkというクラス名をつけます。

 

Moon

cssgram

moonというクラス名をつけます。

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

 

いかがでしたか。画像にサックとエフェクトをかけたい時に便利ですね。
以上で画像に Instagram風のエフェクトを追加できるスタイルシート「CSSgram」!でした。

topへ戻る