Редактирование изображений в CSS: смешение техник

Дата публикации: 2016-09-08

От автора: в предыдущих двух уроках этой серии мы узнали, как фильтры и режимы наложения могут полностью изменить изображения. В этом же уроке я расскажу про основные моменты редактирования изображений css обоими способами.

Основы

Даже для примитивного редактирования изображений зачастую требуется более одного элемента. Сделать это можно при помощи псевдоэлементов. Но на нашем пути встает проблема. Тег img попадает под влияние заменяемых элементов, вследствие чего псевдоклассы :before и :after не работают с тегом изображения. Чтобы решить эту проблему, необходимо обернуть тег изображения в тег figure. Разметка будет такая:

<figure>
  <img src="image-url">
</figure>

</figure>

У всех наших эффектов будет общий базовый CSS код:

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

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 на изображении. CSS код эффекта:

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

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 можно поднять перекрывающий слой над изображением. Чтобы сделать изображение чуть темнее после применения тени, я использовал режим наложения overlay. Наведите курсор на изображение ниже, чтобы увидеть разницу между просто фильтрами и фильтрами в паре с режимами наложения.

В качестве практики можно поменять значения свойства box-shadow.

Состариваем изображение

На большинстве старых фотографий цвета тускнеют, а по контуру появляется красновато-коричневая рамка. Для имитации такого эффекта нам понадобится больше элементов и фильтров. CSS код:

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

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);

}

В этот раз я применил фильтры к изображению и тегу figure. Нам необходимо понизить цветность изображения. Сделать это можно, понизив значение фильтра насыщенности ниже 1. Фильтры к тегу figure применяются после всех режимов наложения. Если фильтры не применить, на финальном изображении будут более яркие оттенки коричневого, что нам не нужно.

Также вам стоит обратить внимание на то, что я применил полупрозрачный красный фон к обоим псевдоклассам. Именно этот фон придает красноватый оттенок. Свойство box-shadow используется для придания контуру коричневого оттенка.

Чтобы добиться лучшего результата, поэкспериментируйте с различными свойствами.

Добавление оттенка

На сей раз, мы попробуем придать нашему изображению голубой оттенок. По сравнению с теплыми цветами, холодные оттенки намного приятнее для глаз. CSS код:

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

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:

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

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 еще сильнее усиливают эффект.