CSS Эффекты для изображений: Инфракрасная фотография

CSS Эффекты для изображений: Инфракрасная фотография

В последнем посте блога, мы рассмотрели CSS эффекты для изображений: Виньетка и box-shadow. Это продолжение темы CSS свойств, которые можно применить для изображений. Я решил дополнить тему чем — то сладким, а именно — поддельным инфракрасным фотоэффектом.

 

Инфракрасная фотография

Инфракрасная фотография отражает свет в спектре вне того, что видно человеческому глазу (свет, который лежит между видимой областью спектра и радиоволнами). Существует особый вид фильтра, которым можно захватить этот свет и создать действительно потрясающие, сюрреалистические эффекты.

Эффект инфракрасной фотографии на самом деле небольшой фото хак, и мы можем подделать его довольно легко в CSS. В основном все сводится к 4 этапам: Дублирование, Инверсия, Применение режима Blend и настройка Hue.

 

Шаг 1: Дублирование

Первый шаг, это — дублировать базовый образ. Это может быть сделано с использованием нескольких элементов, либо с помощью псевдо элемента. Помните, что вы не можете использовать псевдо — элементы на теге <img>, так что вам нужно будет либо выстроить два изображения, либо использовать тег <figure>. Если вы используете два изображения, вы должны будете технически разместить эти два элемента в пределах <figure>.

HTML
<figure class="creek--infra"></figure>

Шаг 2: Инверсия

Теперь мы воспользуемся свойством filter: invert на верхнем слое (это живой эффект, так что вы будете видеть его только в совместимом браузере):

Оригинальное изображение

CSS режимы наложения

Инвертированное изображение

Шаг 3: режим Blend

Теперь, убедившись, что мы наслоили два изображения друг на друга, мы используем режим blend-mode: color на верхнем изображении (на инверсионном). Вот где происходит волшебство!

HTML
<figure class="creek--infra"></figure>

CSS
.creek--infra {
  background-image: url('creek.jpg');
  height: 400px;
  background-size: cover;
  position: relative;
}
 
.creek--infra:after {
  content: '';
  position: absolute;
  top:0; left:0;
  width: 100%;
  background-image: url('creek.jpg');
  -webkit-filter: invert();
    filter: invert(1);
  height: 400px;
  background-size: cover;
  mix-blend-mode: color;
}

Настройка Hue

Сейчас, наше изображение немного яркое, поэтому мы немного уменьшим насыщенность путем установки filter: saturate() до значения меньше 1-го. Плюс, мы можем использовать filter: hue-rotate(),и поиграть с цветом.

Единственное различие на этот раз в том, что здесь я использую filter: invert(1) saturate(.75) hue-rotate(60deg); а не только filter: invert(1) на верхнем слое. Здорово, правда?

 

Mixin

Я сделал немного Mixin, чтобы воссоздать этот эффект! Мы просто указываем URL изображения и степень hue-rotate при вызове Mixin.

Наш @mixin выглядит следующим образом:

@mixin infrared($img, $deg: -60) {
  position: relative;
  background: url('#{$img}');
  background-size: cover;
 
  &:after {
    background:  url('#{$img}');
    filter: invert(1) saturate(.75) hue-rotate(#{$deg}deg);
    mix-blend-mode: color;
    background-size: cover;
  }
}

И использование этого кода @mixin будет выглядеть так:

.creek-infra {
  @extend infrared('creek.jpg', 60);
}

Поиграйте со своими собственными изображениями используя коды от примера ниже, скачать HTML и CSS можете с моего Яндекс диска ЗДЕСЬ:

Итак, CSS эффекты для изображений: Инфракрасная фотография. Всего 4 шага: Дублирование, Инверсия, Применение режима Blend и настройка Hue.

Надеюсь, вам понравилось! Пожалуйста, поделитесь постом и проверьте другие записи в блоге.

Aliexpress INTAliexpress INTAliexpress INT

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

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