CSS фото-ефекти. Частина третя: Три методи зробити ефект віньєтки

Метод перший: box-shadow

Найпопулярніший спосіб - це накласти box-shadow на елемент. Це, до речі, є дуже цікавою і гнучкою властивістю. Я навіть написала цілий пост про те, як можна зробити піксель-арт за допомогою box-shadow списків з функціями у Sass.

Воно працює приблизно таким чином:

box-shadow: [горизонтальний зсув] [вертикальний зсув] [радіус розмиття] [радіус поширення] [колір];

Ось стандартний приклад дії box-shadow:

.normal-shadow-ex {
  background: hotpink;
  height: 180px;
  box-shadow: 10px 10px 20px black;
}

Але box-shadow також може працювати навпаки. Замість того, щоб поширюватися поза блоком, він може починатися з його периметра і розширюватися аж до центру. Якщо ми напишемо той самий код, але ще додамо ключове слово inset, то отримаємо щось подібне до цього:

.inner-shadow-ex {
  background: hotpink;
  height: 180px;
  box-shadow: inset 10px 10px 20px black;
}

Достатньо просто зцентрувати тінь написавши значення 0 для вертикального та горизонтального зсувів і дати як можна більший радіус поширення.

.vignette-shadow-ex {
  background: hotpink;
  height: 180px;
  box-shadow: inset 0 0 100px black;
}

Круто, ми можемо творити ефект віньєтки лише одним рядком коду! Але тут з’являється одна проблема. box-shadow створює тінь за контентом(логічно), а <img> і є цим контентом, тому ми не зможемо побачити зроблену нами тінь взагалі. Нам залишається лише використовувати псевдоелементи або div'и.

.vignette-inset {
  position: relative;
  height: 400px;
  display: block;
  background-image: url('../images/posts/css-effects/3/atx-rooftop.jpg');
  background-size: cover;
}
.vignette-inset:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  box-shadow: inset 0px 0px 150px black;
}

Я думаю, що цей метод не такий поганий. Проте він робить дивний квадрат по периметру фотографії і взагалі, ефект віньєтки має трохи інший вигляд.

Метод другий: Радіальні градієнти

Базовий градієнт з прозорого rgba(0,0,0,0) до чорного rgba(0,0,0,1), накладений на рожевий колір виглядає так:

.gradient-1 {
  background: radial-gradient(transparent, black), hotpink;
  height: 180px;
}

Тепер зображення темніше, ніж нам потрібно. Для того, щоб зробити наш фон більш видимим, ми можемо задати частину, з якої прозорий "колір" почне зливатися з чорним через radial-gradient(transparent 50%, black).

.gradient-2 {
  background: radial-gradient(transparent 50%, black), hotpink;
  height: 180px;
}

Ефект лінзи

Тепер воно стало більш схожим, але досі не є справжнім ефектом віньєтки. Коли ми фотографуємо, то лінза створює тінь навколо зображення, як показано тут:

Тому, для початку, ми маємо змінити форму еліпса, щоб імітувати лінзу об'єктиву і розташувати її по центру. Це можна зробити дуже просто за допомогою слова circle перед оголошенням параметрів градієнту. Наступну річ, яку ми маємо зробити - це врегулювати рівень поширення темного кольору. Результатом буде щось схоже на це:

.gradient-3 {
  background: radial-gradient( circle, transparent 50%, black 150%), hotpink;
  height: 180px;
}

Ще один чудовий приклад, як можна погратися з цим:

.vignette-radial {
  position: relative;
  height: 400px;
  display: block;
  background-image: url('../images/posts/css-effects/3/atx-rooftop.jpg');
  background-size: cover;
}
.vignette-radial:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle, transparent 50%, black 150%);
}

Метод третій: Змішані градієнти

Хто сказав, що градієнти повинні бути тільки чорно-білі? Згадаємо другий метод, але при цьому візьмемо колір відмінний від чорного і накладемо на нього функцію змішування кольорів, використавши diference або exclusion.

І ось що з цього вийде:

.vignette-colorful {
  position: relative;
  height: 400px;
  display: block;
  background-image: url('../images/posts/css-effects/3/atx-rooftop.jpg');
  background-size: cover;
}
.vignette-colorful:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle, transparent 50%, red 150%);
  mix-blend-mode: difference;
}