Редагування зображень у css змішаної техніки
Навіть для примітивного редагування зображень часто потрібно більше одного елемента. Зробити це можна за допомогою псевдоелементів. Але на нашому шляху постає проблема. Тег img потрапляє під вплив елементів, що замінюються, внаслідок чого псевдокласи :before і :after не працюють з тегом зображення. Щоб вирішити цю проблему, необхідно обернути тег зображення на тег figure. Розмітка буде такою:
Всі наші ефекти мають загальний базовий CSS код:
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Я використовував псевдокласи :before та :after, щоб можна було застосовувати різні режими накладання. Я поставив властивості width і height на 100%, щоб зображення займало всю площу від figure. Для ідеального вирівнювання використовував абсолютне позиціонування.
У більшості випадків ми будемо застосовувати фільтри до зображень та використовувати режими накладання на псевдокласах. Нижче показано оригінал зображення, яке ми редагуватимемо.
Висококонтрастні чорно-білі зображення
Щоб створити зображення з підвищеною контрастністю, можна просто встановити контраст на максимум. Щоб ефект був ще драматичнішим, можна підвищити яскравість. Якби ви просто працювали з фільтрами, то більшого ви б зробити не змогли. Однак з режимами накладання можна додати внутрішню тінь із режимом перекриття overlay на зображенні. CSS код ефекту:
За допомогою властивості z-index можна підняти шар над зображенням. Щоб зробити зображення трохи темнішим після застосування тіні, я використовував режим накладання overlay. Наведіть курсор нанижче, щоб побачити різницю між просто фільтрами і фільтрами в парі з режимами накладання.
Як практика можна змінити значення якості box-shadow.
Зроблюємо зображення
На більшості старих фотографій кольори тьмяніють, а по контуру з'являється червонувато-коричнева рамка. Для імітації такого ефекту нам знадобиться більше елементів та фільтрів. CSS код:
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
На цей раз я застосував фільтри до зображення та тегу figure. Нам необхідно знизити кольоровість зображення. Зробити це можна, знизивши значення фільтра насиченості нижче 1. Фільтри до тега figure застосовуються після всіх режимів накладання. Якщо фільтри не застосувати, на фінальному зображенні будуть яскравіші відтінки коричневого, що нам не потрібно.
Також вам варто звернути увагу на те, що я застосував напівпрозоре червоне тло до обох псевдокласів. Саме це тло надає червонуватий відтінок. Властивість box-shadow використовується для надання контуру коричневого відтінку.
Щоб досягти кращого результату, поекспериментуйте з різними властивостями.
Додавання відтінку
Цього разу ми спробуємо надати нашому зображенню блакитного відтінку. У порівнянні з теплими квітами, холодні відтінки набагато приємніші для очей. CSS код: