Як застосувати фільтри Instagram до веб-зображень
Багато люблять використовувати Instagram і фільтри, які приходять з додатком, щоб зробити їх фотографії цікавішими і красивішими. Поки що, однак, використання цих фільтрів обмежено для використання всередині програми. Що робити, якщо ви хочете використовувати фільтри Instagram на веб-зображеннях, поза додатком, як фотографії, які ви хочете розмістити у своєму особистому блозі або веб-сайті?
Ну, ви можете використовувати CSSGram, невелику бібліотеку, яка дозволяє вам редагуйте свої фотографії за допомогою фільтрів, подібних до того, що можна знайти на додатку Instagram. На відміну від Photoshop, де редагування здійснюється вручну або здійснюється за допомогою дій Photoshop, з CSSGram весь процес здійснюється через CSS.
Як це працює
Для створення ефекту використовується CSSGram Фільтри CSS і Режим накладання CSS, в основному змішування ефектів до точки, де вона імітує бажаний фільтр Instagram. Ефекти застосовуються до контейнера зображення через псевдоелементи. Давайте перевіримо, як це зробити з прикладом "1977":
Ось доданий псевдоелемент.
._1977 position: relative; ._1977: після content: "; дисплей: блок; висота: 100%; ширина: 100%; верх: 0; ліворуч: 0; позиція: абсолютна;
І це фільтр CSS і додано Blend:
._1977 -вебкіт-фільтр: контрастність (1.1) яскравість (1.1) насичення (1.3); фільтр: контрастність (1.1) яскравість (1.1) насичення (1.3); ._1977: після фон: rgba (243, 106, 188, 0.3); mix-blend-режим: екран;
Як використовувати
Не можна додати клас фільтра безпосередньо до елемента зображення, він повинен бути доданий до контейнера або батьківського класу, наприклад, з
Код буде виглядати так:
Не забудьте включити бібліотеку CSSgram (отримати її тут) до свого HTML-документа.
Я створив демонстрацію зображень до і після додавання фільтра, і результат дуже приємний. Наразі в бібліотеці включено 13 фільтрів. Нижче ви можете побачити відмінності між вихідним зображенням і зображенням під фільтрами "1977","Аден"і"Гінгам".
Див. Ручку rOKPmW
Якщо ви просто зацікавлені у використанні будь-якого з стилів, ви можете відповідно завантажувати окремі файли CSS.
Використання SCSS
Якщо ви хочете додати фільтри до вашого поточного класу контейнера зображення без зміни імені, це можна зробити, розширюючи ефект фільтра у файлах SCSS. Ось як це зробити.
Спочатку завантажте вихідний файл SCSS та імпортуйте ваш файл SCSS.
@import 'постачальник / cssgram';
Припустимо, що у вас є HTML-структура:
Потім у стилі style.scss розгорніть фільтр так:
.мій клас … @extend% _1977;
Більше Instagram повідомлень
- 40 Інструменти та додатки, які доповнюють ваш обліковий запис Instagram
- 20 Корисні програми для отримання максимальної віддачі від Instagram
- 10 корисних порад та трюків у Instagram, які ви повинні знати
