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

2 хв. читання

Ефект ерозії

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

Фото без ефекту ерозії {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;
}
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.7K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: img example, jpg img, img size css