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

Ефект ерозії

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

{full-post-img}

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

{full-post-img}

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

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

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

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

!embed {full-post-img}

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

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

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

.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;
}