В последних двух уроках этой серии мы обсудили, как фильтры и режимы наложения могут полностью изменить внешний вид изображений. В этом уроке я расскажу об основах редактирования изображений, используя оба эти свойства вместе.
Основы
Любое не примитивное редактирование изображений обычно требует больше, чем просто один элемент. Это может быть достигнуто с помощью псевдоэлементов. К сожалению, есть еще одно осложнение. Элемент img попадает под заменяемые элементы. В результате :before и :after не будут работать с тегами изображений. Чтобы решить эту проблему, нам понадобится обертка вокруг нашего изображения, и тег figure кажется лучшим кандидатом в этом случае. Поэтому наша разметка должна выглядеть так:
|
1
2
3
|
<figure>
<img src=»image-url»>
</figure>
|
Все эффекты редактирования, которые мы создадим, будут иметь несколько основных CSS.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
figure {
position: relative;
}
figure:before,
figure:after {
content: »;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
|
Я использовал псевдоэлементы :before и :after чтобы я мог применять различные режимы наложения. Обратите внимание, что я установил width и height на 100%, чтобы правильно покрыть figure , и я использовал абсолютное позиционирование для идеального выравнивания.
В большинстве случаев мы будем применять фильтры к изображениям и использовать режимы наложения и другие эффекты для псевдоэлементов. Изображение ниже — это оригинальное изображение, которое мы будем редактировать.
Высококонтрастные изображения в градациях серого
Чтобы создать высококонтрастное изображение, вы можете просто установить более высокое значение контрастности, но увеличение яркости делает эффект более драматичным. Если бы вы просто использовали фильтры, то это все, что вы могли бы сделать. Тем не менее, в режимах overlay можно также добавить вставку-тень с overlay на изображение для получения лучших результатов. Вот CSS для этого эффекта:
|
1
2
3
4
5
6
7
8
9
|
img {
filter: contrast(1.8) brightness(1.5) grayscale(1);
}
figure:before {
z-index: 3;
mix-blend-mode: overlay;
box-shadow: 0 0 200px black inset;
}
|
Добавление z-index оставляет наши псевдоэлементы над изображением. Я использовал режим наложения, чтобы изображение оставалось немного темным после нанесения тени.
Попробуйте навести курсор на изображение ниже, чтобы увидеть разницу между фильтрами и сочетанием фильтров и режимов наложения.
Для практики вы можете попробовать разные значения свойства box-shadow в демонстрационной версии CodePen .
Придание изображениям более старого вида
Цвет на большинстве старых фотографий обычно исчезает, и у них есть красновато-коричневая внешняя подкладка. Чтобы воссоздать тот же эффект, нам нужно будет использовать больше элементов и фильтров. Вот наш CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
img {
filter: saturate(0.6);
}
figure {
filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 250px brown inset;
background: rgba(125, 100, 0, 0.3);
}
figure:after {
z-index: 3;
mix-blend-mode: hard-light;
box-shadow: 0 0 150px pink inset;
background: rgba(198, 155, 0, 0.3);
}
|
На этот раз я применил фильтры как к изображению, так и к рисунку. По сути, мы хотим, чтобы изображение было менее красочным. Это достигается с помощью фильтра насыщения со значением ниже 1. Фильтры рисунка применяются после всего смешивания. Если вы не применяете эти фильтры, конечный результат будет иметь гораздо более заметные оттенки коричневого, что нежелательно.
Следует отметить, что я также применил полупрозрачный красноватый фон к обоим псевдоэлементам. Это дает изображениям их красновато-коричневый вид. Ящик-тень используется для того, чтобы сделать контур сравнительно более коричневым.
Вы должны поэкспериментировать с различными свойствами в демо, чтобы увидеть, можете ли вы получить лучшие результаты.
Добавление определенного оттенка
На этот раз мы постараемся придать нашему изображению синий оттенок. По сравнению с теплыми цветами, добавление оттенка холодных цветов, таких как синий, делает изображения легкими для наших глаз.
Это CSS, который мы должны применить:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
img {
filter: brightness(1.1) contrast(1.3);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}
figure:after {
z-index: 3;
mix-blend-mode: difference;
background: rgba(0, 0, 255, 0.3);
}
|
Я начинаю с увеличения яркости и контрастности нашего изображения. Это гарантирует, что наше изображение не потеряет менее заметные цвета и станет слишком тусклым во время редактирования.
Для заметных изменений вам обычно приходится использовать несколько box-shadow с более светлыми цветами. Вот почему я добавляю две голубоватые box-shadow к нашему изображению. Просто использование box-shadow ограничивает синий оттенок до границы нашего изображения. Чтобы распространить синий цвет по всему изображению, я использую его в качестве фона для псевдоэлемента :after . Вот окончательный результат всех этих фильтров:
Попробуйте добавить зеленый или красный оттенок к изображению в демоверсии .
Желтоватая дымка
Вы когда-нибудь видели немного облачный вечер с частицами песка, взвешенными в атмосфере из-за ветра? В этих погодных условиях все имеет желтоватый оттенок, а объекты кажутся немного скучными. Чтобы воссоздать тот же эффект, нам нужен следующий CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
img {
filter: saturate(0.2);
}
figure {
filter: contrast(1.8) brightness(1.1) saturate(1.5);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
background: rgba(125, 100, 0, 0.3);
}
figure:after {
z-index: 3;
mix-blend-mode: hard-light;
box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
background: rgba(198, 155, 0, 0.3);
}
|
Первое, что я делаю, это уменьшаю насыщенность изображения. Оба псевдоэлемента :before и :after имеют полупрозрачный желтоватый фон для добавления желаемого оттенка. Включение режима наложения hard-light :after делает дымку более заметной.
box-shadow на псевдоэлементах повышает фокусировку на байкере. Наконец, применение фильтров высокой contrast , brightness и saturation к элементу figure усиливает дымку.
В демоверсии вы можете попробовать разные значения для различных свойств, чтобы увидеть, как они влияют на конечный результат.
Последние мысли
Не так сложно редактировать изображения в CSS. Если вы будете помнить те моменты, о которых я говорил в этом уроке, вы сможете создать свои собственные удивительные фильтры.
Для практики вы можете поэкспериментировать с демонстрационными примерами из этого руководства или попытаться воссоздать популярные фильтры Instagram. Вы также можете проверить разнообразие анимаций и эффектов, доступных на Envato Marketplace, на случай, если вам понадобятся готовые фильтры.