CSS фото-ефекти. Частина перша: Вінтаж

Не так давно я вела розмову на CSS Conf EU, який називався “Фотошоп мертвий! Редагуємо фото на CSS”. Моєю ідеєю було просто показати спосіб, як можна зробити у браузері ті речі, які ви зазвичай робите у Фотошопі, але коли я почала досліджувати ті ефекти, то знайшла дуже багато чого! Я показала деякі з них на конференції і зараз збираюся написати серію постів, які легше буде зрозуміти. Давайте почнемо з чогось простого та ефектного!

Ефект ерозії

Цей ефект ми зазвичай бачимо у фільтрах, які придають фото вінтажний стиль. Тут найтемніші кольори висвітлюються, загублюються маленькі деталі у тінях і понижується контраст.

Фото без ефекту ерозії

Фото з ефектом ерозії:

Фото з ефектом ерозії

Крок перший: Висвітлення

Тут ми можемо застосовувати псевдоелемент background-blend-mode: lighten, або “елемент перекриття” mix-blend-mode: lighten. Хоча, на своєму досвіді, я рекомендую застосовувати перше.

При висвітлюванні, світліші пікселі розташовуються між темнішими. Тому, при накладенні більш темного кольору на світліший, ефекту не буде. Наприклад, “висвітливши” помаранчевий колір коричневим, все одно вийде помаранчевий. Коли ми правильно змішуємо кольори, виходить новий колір.
Наприклад при змішуванні rgb(195, 25, 106) //рожевого з rgb(6, 19, 255) //синім будеrgb(195, 25, 255) //magenta.

Візуально

Крок другий: Визначаємо найтемніший колір

Ми використаємо цей спосіб, щоб дізнатися, який повинен бути найтемніший колір на фото, тим самим створюючи “ефект пом’якшення”. Наприклад, якщо ми виберемо сірий колір, то все, що було темніше стає сірим, а те, що світліше залишиться незмінним.

Застосування

Найкраще цей метод застосовувати на “змішаних” фонах, тому що ще не усі браузери підтримують дані ефекти. Якщо ви будете використовувати “змішані фони”, головне фото все одно буде видно у ситуаціях, коли другий фільтрований фон не спрацює.

.vintage-effect {
  height: 350px;
  background:
    url('../images/posts/css-effects/1/example-img.jpg'),
    #533a16;
  background-size: cover;
  background-blend-mode: lighten;
}

@mixin

Окей, а тепер трохи підкорегуємо код за допомогою @mixin у Sass.

Sass:

@mixin fade-it($img, $shadow: #536) {
  background: url('#{$img}'), $shadow;
  background-blend-mode: lighten;
}

.apply-base {
  @include fade-it('1.jpg');
}

.apply-unique-shade {
  @include fade-it('2.jpg',
                   #293e78);
}

Як це виглядає на CSS:

.apply-base {
  background: url('1.jpg'), #536;
  background-blend-mode: lighten;
}

.apply-unique-shade {
  background: url('2.jpg'), #293e78;
  background-blend-mode: lighten;
}