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;
}
Ще немає коментарів