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

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

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

Основы

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

<figure>
  <img src="image-url">
</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;
}

Я использовал псевдоклассы :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;
}

С помощью свойства z-index можно поднять перекрывающий слой над изображением. Чтобы сделать изображение чуть темнее после применения тени, я использовал режим наложения overlay. Наведите курсор на изображение ниже, чтобы увидеть разницу между просто фильтрами и фильтрами в паре с режимами наложения.

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

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

На большинстве старых фотографий цвета тускнеют, а по контуру появляется красновато-коричневая рамка. Для имитации такого эффекта нам понадобится больше элементов и фильтров. 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);
}

В этот раз я применил фильтры к изображению и тегу 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);
}

Я начну с увеличения яркости и контрастности изображения. Так наше изображение не потеряет незаметные цвета, а редактирование не будет таким скучным.

Для более заметных изменений необходимо использовать несколько свойств 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);
}

Первым шагом я понижаю насыщенность изображения. На оба псевдокласса :before и :after наложен полупрозрачный желтоватый фон, добавляющий нужный эффект. Режим наложения hard-light на псевдоклассе :after делает эффект ярче.

Свойство box-shadow на псевдоклассах заставляет сфокусироваться на байкере. И наконец, фильтры contrast, brightness и saturation на теге figure еще сильнее усиливают эффект.

Чтобы увидеть, как изменяется изображение, вы можете изменить значения разных свойств в демо.

Заключительные мысли

Редактировать изображения в CSS не так и сложно. Если вы запомните описанные мной способы, вы сможете создавать удивительно красивые фильтры.

В качестве практики можете поэкспериментировать с демо из урока, а также вы можете попытаться воссоздать популярные фильтры из Instagram.

Редакция: Monty Shokeen

Источник: http://code.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree