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

5 хв. читання

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;
}
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.7K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: <img width, img width, img url