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

aden

Reyes: class=”reyes”

reyes

Perpetua: class=”perpetua”

perpetua

Inkwell: class=”inkwell”

inkwell

Earlybird: class=”earlybird”

early bird

Toaster: class=”toaster”

toaster

Walden: class=”walden”

walden

Hudson: class=”hudson”

hudson

Gingham: class=”gingham”

gingham

Mayfair: class=”mayfair”

mayfair

Lo-Fi: class=”lofi”

lo-fi

X-Pro2 II: class=”xpro2″

x-pro2-ll

1977: class=”_1977″

1977

Brooklyn: class=”brooklyn”

brooklyn

Nashville: class=”nashville”

nashvill

Lark: class=”lark”

lark

Moon: class=”moon”

moon

وضعیت پشتیبانی مرورگرها:

  • Google Chrome: 43+
  • Mozilla Firefox: 38+
  • Internet Explorer: Nope –
  • Opera: 32+
  • Safari: 8+
اگر این مقاله براتون جالب بود می‌تونید بقیه افکت‌های مختلفی‌ رو که با css می‌شه درست کرد رو اینجا ببینید و یاد بگیرید.

منبع : مجید آنلاین

برچسب گذاری شده در:

, , , , , , ,

درباره نویسنده

سامان

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

مشاهده تمام مقالات