چگونه فيلترهاي اينستاگرام را بر روی تصاوير وب اعمال كنيم؟

بسیاری شیفته استفاده از اینستاگرام و فیلترهای درون برنامه‌اش، برای زیباتر و جذابتر كردن عكس‌هایشان هستند. هرچند تا كنون، استفاده از این فیلترها تنها محدود به درون برنامه است. اگر شما بخواهید از فیلترهای اینستاگرام بر روی تصاویر وب خارج از برنامه، مانند تصاویری كه می‌خواهید بر روی بلاگ شخصی خود یا وبسایت‌تان، استفاده كنید چه؟ 

خب شما می‌توانید از CSSGram، یك مجموعه كوچك كه به شما امكان ویرایش تصاویرتان با فیلترهایی مشابه فیلترهای موجود در برنامه اینستاگرام می‌دهد، استفاده كنید. برخلاف فتوشاپ كه ویرایش‌ها دستی هستند و یا از طریق اقدامات فتوشاپ انجام می‌شوند، با  CSSGram، تمامی فرآیند توسط CSS صورت می‌گیرد.

چگونه كار می‌كند؟

برای راه‌اندازی افكت، CSSGram از فیلترهای CSS و CSS Blend mode، كه اصولا افكت ها را تا جایی كه مشابه فیلتر اینستاگرامی مورد نظر شما باشد، تركیب می‌كند، بهره می‌برد. افكت‌ها بر روی كاتینر تصاویر، از طریق شبه عناصر یا Pseudo-elements ،اعمال می‌شوند. بیایید با این مثال 1977، نحوه انجام آن را بررسی كنیم:

این شبه عنصری است كه اضافه كرده‌ایم.

._1977{
  position: relative;
}
._1977:after{
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

و این فیلتر CSS و Blend اضافه شده است:

._1977 {
  -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
  filter: contrast(1.1) brightness(1.1) saturate(1.3); 
}
._1977:after {
  background: rgba(243, 106, 188, 0.3);
  mix-blend-mode: screen; 
}

نحوه استفاده

ما نمی‌توانیم كلاس فیلتر را مستقیما به عنصر تصویر اضافه كنیم، بلكه باید به كانتینر یا كلاس والد، به عنوان مثال با یك <figure> به عنوان كانتینر، اضافه شود.

این كد به شكل زیر خواهد بود:

<figure class="_1977">
    <img src="images.jpg">
</figure>

فراموش نكنید كه مجموعه CSSGram را (آن را از اینجا دریافت كنید) به اطلاعات HTML خود اضافه كنید.

<link rel="stylesheet" href="path/to/cssgram.css">

من دموی قبل و بعد از اضافه كردن فیلتر را ساختم و نتیجه بسیار خوب بود. در حال حاضر در مجموعه 13 فیلتر وجود دارد. شما می‌توانید تفاوت بین عكس اصلی و فیلترهای “1977”، “Aden”، “Gingham” را در لینك زیر ببینید.

بر روی لینك كلیك كنید. rOKPmW

اگر شما تنها علاقمند به استفاده از یكی از طرح‌ها هستید، شما می‌توانید بسته به میل خود فایل‌های تكی CSS را بارگذاری كنید.

استفاده از SCSS

اگر شما می‌خواهید فیلترها را به كانتینر تصاویر فعلی خود بدون تغییر دادن اسم اضافه كنید، شما می‌توانید این كار را با گسترش فایل فیلتر درون فایل‌های SCCS انجام دهید. شما می‌توانید این كار را به صورت زیر انجام دهید.

در ابتدا فایل سورس SCCS را دانلود كنید و فایل SCSS خود را ایمپورت كنید.

@import 'vendor/cssgram';

فرض كنیم شما ساختار HTMLی مانند زیر دارید:

<div class="my-class">
    <img src="images.jpg">
</div>

سپس در  style.scss خود، فیلتر را به صورت زیر گسترش دهید:

.my-class {
    ...
    @extend %_1977;
}

منبع