آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب

 

 

 

 

بسیاری از کاربران از بخش ادیت تصاویر اینستاگرام به منظور افکت گذاری بر روی تصاویر خود استفاده می کنند. فیلترهای تصویر در اینستاگرام به صورت کاملا رایگان قابل استفاده بوده و بر خلاف سایر نرم افزارهای ادیت و ویرایش تصویر، نسخه پولی و یا آنلاک شده ندارد. 

 

در این میان ممکن است برخی از مدیران و طراحان وب سایت بخواهند از افکت های تصویری برای زیباسازی عکس های درون وب سایت استفاده نمایند. به منظور ادیت عکس در محیط طراحی وب می توانید از ابزارهای مانند فتوشاپ و ... استفاده کنید.

 

در این مقاله می خواهیم به بررسی روش استفاده از افکت های اینستاگرام در طراحی وب و به صورت مستقیم بپردازیم. با سرزمین دانلود همراه باشید.

 

 

معرفی کتابخانه CSSGram

 

CSSGram یک کتابخانه کوچک و بر پایه CSS و SCSS می باشد. با استفاده از این کتابخانه می توانید بدون نیاز به فتوشاپ افکت های تصویری اینستاگرام را از طریق کدهای HTML و CSS بر روی تصاویر وب سایت اعمال کنید. 

 

برای دانلود CSSGram می توانید از تاپیک موجود در سایت GitHub استفاده نمایید.

 

 

روش استفاده از CSSGram

 

این قابلیت را نمی توان به صورت مستقیم بر روی تصاویر اعمال نمود. در واقع باید قبل از آدرس عکس و در بخش Container یا المنت های تصویر از آن استفاده نمایید. 

 

به منظور استفاده از این کتابخانه در ابتدا باید کدهای CSSGram را در صفحه اسناد HTML خود قرار دهید. روش کار این کتابخانه به این صورت است که با استفاده از CSS میزان روشنایی و سایر ویژگی های تصویر را به شکل افکت اینستاگرام تغییر خواهد داد. در ادامه کد یک عکس که با استفاده از این کتابخانه افکت گذاری شده است را می توانید مشاهده کنید:

 

 

 

پس از اضافه کردن افکت 1977 که یکی از افکت های اینستاگرام می باشد. CSS به شکل زیر در خواهد آمد.

 

 

 

در این مقاله به بررسی روش استفاده از CSSGram به منظور افزودن افکت به تصاویر درون وب سایت پرداختیم. در نظر داشته باشید که استفاده از این روش به مراتب بسیار بهینه تر از نرم افزارهای ادیت عکس مانند فتوشاپ می باشد. برای ارسال نظرات و سوالات خود می توانید از طریق فرم زیر با ما در تماس باشید.