ایجاد افکت های اینستاگرام با css

اگه در اینستاگرام فعالیت کرده باشید باید متوجه شده باشید که میشه افکت های مختلفی رو روی عکس اعمال کرد و نور و میزان شفافیت و … عکس رو تنظیم کرد , حالا همین کار رو میتونیم با استفاده از دستورات css انجام بدیم تا عکس های درون سایتمون به صورت هایی که ما میخوایم تغییر حالت بدن 😀 پیش نمایش فیلتر های اینستاگرام که با css ایجاد شده رو میتونید از اینجا ببینید(کلیک کنید) همچنین میتونید فایل فیلترهای اینستاگرام رو از انتهای همین پست دانلود و استفاده کنید.

فیلترها درون یک فایل css برای دوستان عزیز قرار داده شده که با استفاده از اون و کلاس هایی که درونش تعریف شده میتونید افکت هایی مانند اینستاگرام با استفاده از Css بر روی عکس های خودتون اعمال کنید. روش استفاده از فایل css به این صورت هست که شما ابتدا باید این فایل رو با استفاده از دستور link درون صفحه وب خودتون اظافه کنید و سپس یک ساختار html با استفاده از تگ figure ایجاد کنید مثل ساختار زیر:

در نهایت نام کلاس افکت رو به تگ figure میدید 😀 به همین راحتی , به کد زیر دقت کنید:

در کد بالا اومدیم و به کلاس تگ figure مقدار aden رو دادیم تا فیلتر aden بر روی عکس اعمال بشه 😀

افکت های موجود در فایل css به صورت لیست زیر هستند:

  1. aden
  2. reyes
  3. perpetua
  4. inkwell
  5. earlybird
  6. toaster
  7. walden
  8. hudson
  9. gingham
  10. mayfair
  11. lofi
  12. xpro2
  13. ۱۹۷۷_
  14. brooklyn
  15. nashville
  16. lark
  17. moon

نکته: این افکت ها بر روی فایرفاکس ۳۸ به بالا , گوگل کروم ۴۳ به بالا , اپرا ۳۲ به بالا و سافاری ۸ به بالا به درستی کار خواهد کرد و همه تست شده اند.

فقط کافیه که نام افکت ها رو به کلاس یک تگ html نسبت بدید. میتونید پیش نمایش همه ی افکت ها رو از اینجا ببینید(کلیک کنید), همچنین میتونید سورس کد فیلترهای اینستاگرام در غالب css رو از انتهای همین پست دانلود و استفاده کنید .

امیدوارم که بدردتون بخوره و توی پروژه های خودتون از این افکت ها استفاده کنید تا عکس های سایت شما رنگ و لعاب تازه ای به خودشون بگیرن. دوستانی که سوال دارند میتونن از بخش نظرات بپرسند تا پاسخ بدم.

افکت های اینستاگرام با cssGram
59.2 KiB
38 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. بازم عالی بود خیلی خیلی جالب بود.
    میشه خواهش کنم درباره طراحی ریسپانسیو هم مطلب بزارید؟؟؟

    • سلام دوست عزیز. راجب طراحی رسپانسیو برای شما پست میزارم به زودی. توی قسمت فیلم های اموزشی هم قصد دارم طریقه طراحی رسپانسیو رو آموزش بدم. ممنون از انتخاب شما. موفق باشید.

می‌خواهید دیدگاهتان را بیان کنید؟