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

فیلترهای اینستاگرام با کتابخانه ی کوچک cssgram
اگر طرفدار فیلترهای اینستاگرام هستید و دوست دارید اون ها رو خارج از اپلیکیشن اینستاگرام هم در دسترس داشته باشید کتابخونه ی cssgram  با حجمی کمتر از 1KB به راحتی‌ این امکان رو براتون فراهم می‌کنه.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

این کتابخونه مجموعه ایی از فیلترهای رنگی‌ و گرادیانت های مختلف رو توسط   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

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

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

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

یا علی