فیلترهای اینستاگرام با کتابخانه ی کوچک cssgram

فیلترهای اینستاگرام با کتابخانه ی کوچک cssgram
اگر طرفدار فیلترهای اینستاگرام هستید و دوست دارید اون ها رو خارج از اپلیکیشن اینستاگرام هم در دسترس داشته باشید کتابخونه ی cssgram  با حجمی کمتر از 1KB به راحتی‌ این امکان رو براتون فراهم می‌کنه.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
دانلود بازی اندروید
اندروید سیتی | بررسی و دانلود آخرین های اندروید
دوره های آموزشی روز دنیا
دیگر نیازی به دانلود نیست، آنلاین ببینید ...
خودتان را اینجا معرفی کنید

این کتابخونه مجموعه ایی از فیلترهای رنگی‌ و گرادیانت های مختلف رو توسط   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>
این هم لیستی از کلاس‌های موجود:
  • Aden: class="aden"
  • Reyes: class="reyes"
  • Perpetua: class="perpetua"
  • Inkwell: class="inkwell"
  • Earlybird: class="earlybird"
  • Toaster: class="toaster"
  • Walden: class="walden"
  • Hudson: class="hudson"
  • Gingham: class="gingham"
  • Mayfair: class="mayfair"
  • Lo-Fi: class="lofi"
  • X-Pro2 II: class="xpro2"
  • 1977: class="_1977"
  • Brooklyn: class="brooklyn"
  • Nashville: class="nashville"
  • Lark: class="lark"
  • Moon: class="moon"
 
وضعیت پشتیبانی مرورگرها:
  • Google Chrome: 43+
  • Mozilla Firefox: 38+
  • Internet Explorer: Nope -
  • Opera: 32+
  • Safari: 8+
 
اگر این مقاله براتون جالب بود می‌تونید بقیه افکت‌های مختلفی‌ رو که با css می‌شه درست کرد رو اینجا ببینید و یاد بگیرید wink

فارغ‌التحصیل رشتهٔ فیزیک و علاقمند به دنیای وب، چند سالی‌ هست که وارد این حرفه شدم و هرروز در حال یادگیری مطلبی جدید!

نظرات و سوالات کاربران

ارسال پاسخ صادق خسروانجم
صادق خسروانجم
سه شنبه ۲۹ دی ۱۳۹۴ ۱۷:۴۹
من یه چند سالی بود به ساییتون سر نزده بوده الان که اومدم به معنی واقعی کلمه کف کردم , دمتون گرم به خدا خیلی مطالب آموزشی خوبی گذاشتید , عالی , خدا بهتون سلامتی و برکت بده

یا علی