اگر طرفدار فیلترهای اینستاگرام هستید و دوست دارید اون ها رو خارج از اپلیکیشن اینستاگرام هم در دسترس داشته باشید کتابخونه ی CSSGram با حجمی کمتر از ۱KB به راحتی این امکان رو براتون فراهم میکنه.
این کتابخونه مجموعه از فیلترهای رنگی و گرادیانت های مختلف رو توسط pseudo المنتهای :before و :after روی تصویر مورد نظر شما اجرا میکنه و این یعنی مجموعه ای از فیلترها و افکتهای جالب با کمترین ادیت ممکن!
برای شروع هم دو راه وجود داره ، یا کتابخونه ی مورد نظر رو از طریق CDN وارد <head> صفحه کنید.
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
یا فایل CSS رو از اینجا دانلود کنید و به صورت دستی وارد صفحتون بکنید.
<link rel="stylesheet" href="css/cssgram.min.css">
بخش مهم و اولیه کار تموم شد، حالا عکس مورد نظرتون رو داخل تگ <figure> قرار بدید و کلاس مورد نظر رو بهش نسبت بدید.
<figure class="aden"> <img src="images/miladtower.jpg"> </figure>
لیستی از کلاسهای موجود CSSGram :
Aden: class=”aden”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram aden](http://prodev.ir/wp-content/uploads/2015/11/aden.jpg)
Reyes: class=”reyes”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram reyes](http://prodev.ir/wp-content/uploads/2015/11/reyes.jpg)
Perpetua: class=”perpetua”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram perpetua](http://prodev.ir/wp-content/uploads/2015/11/perpetua.jpg)
Inkwell: class=”inkwell”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram inkwell](http://prodev.ir/wp-content/uploads/2015/11/inkwell.jpg)
Earlybird: class=”earlybird”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram early bird](http://prodev.ir/wp-content/uploads/2015/11/early bird.jpg)
Toaster: class=”toaster”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram toaster](http://prodev.ir/wp-content/uploads/2015/11/toaster.jpg)
Walden: class=”walden”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram walden](http://prodev.ir/wp-content/uploads/2015/11/walden.jpg)
Hudson: class=”hudson”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram hudson](http://prodev.ir/wp-content/uploads/2015/11/hudson.jpg)
Gingham: class=”gingham”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram gingham](http://prodev.ir/wp-content/uploads/2015/11/gingham.jpg)
Mayfair: class=”mayfair”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram mayfair](http://prodev.ir/wp-content/uploads/2015/11/mayfair.jpg)
Lo-Fi: class=”lofi”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram lo-fi](http://prodev.ir/wp-content/uploads/2015/11/lo-fi.jpg)
X-Pro2 II: class=”xpro2″
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram x-pro2-ll](http://prodev.ir/wp-content/uploads/2015/11/x-pro2-ll.jpg)
1977: class=”_1977″
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram 1977](http://prodev.ir/wp-content/uploads/2015/11/1977.jpg)
Brooklyn: class=”brooklyn”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram brooklyn](http://prodev.ir/wp-content/uploads/2015/11/brooklyn.jpg)
Nashville: class=”nashville”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram nashvill](http://prodev.ir/wp-content/uploads/2015/11/nashvill.jpg)
Lark: class=”lark”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram lark](http://prodev.ir/wp-content/uploads/2015/11/lark.jpg)
Moon: class=”moon”
![فیلترهای اینستاگرام با کتابخانه ی کوچک CSSGram moon](http://prodev.ir/wp-content/uploads/2015/11/moon.jpg)
وضعیت پشتیبانی مرورگرها:
- Google Chrome: 43+
- Mozilla Firefox: 38+
- Internet Explorer: Nope –
- Opera: 32+
- Safari: 8+
منبع : مجید آنلاین