CSS фото-ефекти. Частина друга: 3D-окуляри

3D-картинки або анагліфи

{full-post-img}

Анагліф - це тип 3D-зображення, створений за допомогою двох однакових фото зсунених на 5 сантиметрів (приблизну відстань між очами в людини) у бік. Це створює ілюзію об'єму, якщо дивитися на картинку через окуляри з лінзами різних кольорів.

Темна сторона висвітлення

Згадаємо змішування кольорів з попереднього посту. Тоді ми навчилися висвітлювати фотографію. Сьогодні ми будемо робити протилежний цьому ефект - ефект затемнення зображення.

{full-post-img}

Чи знаєте ви, що станеться, якщо висвітлити та затемнити одну й ту ж саму фотографію? Відміна обох ефектів! Логічно, так само буде, якщо використовувати multiply / screen або color-burn / color-dodge.

{full-post-img}

Тут ви можете побачити, що там, де синє коло у режимі висвітлення і синє коло у режимі затемнення перетинаються, усі два ефекти втрачають свою дію.

3D-зображення

Ми можемо використати "перетин ефектів", щоб показати у деяких місцях оригінал зображення, та скомпонувати з тим, що ми вивчили у попередній статті, щоб отримати 3D-ефект.

Якщо ви подивитесь на дане зображення, то побачите, що блакитне коло і червоне коло віддалені один від одного на приблизно 5 сантиметрів (ми будемо позначати цю відстань як $dist у прикладі з @mixin). Нам потрібно використати ці два кольори як змішаний фон за допомогою background-blend-mode: lighten. Потім ми розташуємо ці елементи один відносно іншого на фіксовану відстань і додамо трохи перспективи.

{full-post-img}

Майте на увазі, що тут обов'язково слід використовувати RGB. Якщо ми використаємо блакитний і жовтий замість блакитного і червоного, то їх перетин буде зеленим замість білого, який нам необхідний, щоб було видно оригінальні кольори зображення. Тому найкраще тут використовувати червоний rgb(255, 0, 0), зелений rgb(0, 255, 0) та синій rgb(0, 0, 255) або блакитний rgb(0,255,255).

Змішуємо кольори

Будемо працювати з червоним та блакитним, бо це класичні кольори у 3D зображеннях. Має вийти щось таке:

{full-post-img}

І тут починається магія! Зараз ми накладаємо ефект затемнення на червоний колір для того, щоб блакитний втрачав свою дію у тих місцях, де перекриваються ділянки з однаковими параметрами. Це означає, що на зображенні два кольори будуть видимі тільки в деяких місцях, де перекриваються дві різні ділянки.

{full-post-img}

Перспектива

Тут ми використовуємо perspective та transform: rotateY для того, щоб отримати ілюзію об'єму, змінивши положення двох однакових зображень. Код для блакитної частини: perspective: 400px; transform: rotateY(5deg); (де 400px - ширина зображення), а для червоної: perspective: -400px; transform: rotateY(-2.5deg);. Я також трохи знебарвила результат за допомогою filter: saturate(.8).

{full-post-img}

Результат до і після:

{full-post-img}

Більше прикладів

{full-post-img}

.threeD-effect {
  margin: 30px auto 0;
  display: block;
  position: relative;
  height: 400px;
  -webkit-filter: saturate(0.75);
          filter: saturate(0.75);
  z-index: 1;
  -webkit-transform: rotateY(15deg);
        transform: rotateY(15deg);
  background: url('../images/posts/css-effects/2/bot.jpg'), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.threeD-effect:after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 400px;
  z-index: 2;
  -webkit-transform: rotateY(7.5deg);
        transform: rotateY(7.5deg);
  background: url('../images/posts/css-effects/2/bot.jpg'), red;
  background-blend-mode: lighten;
  margin-left: 5px;
  background-size: cover;
  mix-blend-mode: darken;
}

Трохи @mixin

Sass

@mixin three-dee($img, $dist: 5px, $deg: 5deg, $width: 100%, $height: 500px) {
    z-index: 1;
    width: $width;
    height: $height;
    position: relative;
    transform: rotateY($deg);
    perspective: $width;
    background: url('#{$img}'), cyan;
    background-blend-mode: lighten;
    background-size: cover;

  &:after {
    content: '';
    position: absolute;
    display: block;
    width: $width;
    height: $height;
    z-index: 2;
    perspective: -$width;
    margin-left: $dist;
    transform: rotateY(-$deg/2);
    background: url('#{$img}'), red;
    background-blend-mode: lighten;
    background-size: cover;
    mix-blend-mode: darken;
  }
}

.cats-in-action {
  @include three-dee('img/cat.jpg', 5px, 10deg, 800px, 600px);
}

Вигляд у CSS:

.cats-in-action {
  z-index: 1;
  width: 800px;
  height: 600px;
  position: relative;
  transform: rotateY(10deg);
  perspective: 800px;
  background: url("img/cat.jpg"), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.cats-in-action:after {
  content: '';
  position: absolute;
  display: block;
  width: 800px;
  height: 600px;
  z-index: 2;
  perspective: -800px;
  margin-left: 5px;
  transform: rotateY(-5deg);
  background: url("img/cat.jpg"), red;
  background-blend-mode: lighten;
  background-size: cover;
  mix-blend-mode: darken;
}