Робимо рамку для зображення з допомогою режимів накладення

2

Від автора: останнім часом Джен Сіммонс і інші закликають до революції у веб-дизайні, Джен каже, що потрібно «мислити за межами відомого» за рахунок використання нових технологій. Питання зображень вносить істотний внесок у відому парадигму: краї зображення майже завжди рівні, а самі зображення прямокутні, якщо тільки не укладені в коло; почасти все це з-за зручності, відсутність уяви або необхідних знань у веб-дизайні, а почасти тому, що надати краях зображення унікальну форму вимагало витрати кількох годин у фотошопі. Але з допомогою режимів накладання можна досягти чудових результатів за мінімальний час.

Робимо рамку для зображення з допомогою режимів накладення

Спершу, треба знайти відповідне зображення:

Робимо рамку для зображення з допомогою режимів накладення

Потім знайти зображення рамки з потертими краями і темним монотонним центром. В мережі повно шаблони для фотошопа, як цей:

Щоб добитися кращого ефекту, як правило підійде щільно стиснуте зображення в сірих тонах, 16 або 32 біт формату PNG.

Фонове зображення на самому зображенні

В принципі, майже на всіх HTML елементах працює властивість background-image, навіть на самому зображенні. Але на жаль, при такому розкладі, фонове зображення лягає на той же шар, що і саме зображення, і режим накладання не працює. Замість цього, ми помістимо наше зображення в контейнер, до якого застосуємо властивість background-image з нашим шаблоном:

Робимо рамку для зображення з допомогою режимів накладення

CSS

div {
background-color: #fff;
background-image: url(masque-24.png);
background-size: cover;
}
div img { width: 100%; }

Визначення потрібного режиму накладення трохи заплутано і змінюється залежно від фону контейнера. Якщо фон і рамка мають білий колір, то кращим варіантом буде screen:

div img { mix-blend-mode: screen; }

Результат такий же, як і в шапці новини.

Інші способи

Існують і інші способи, хоча у обох є свої недоліки:

–Webkit — браузерів є властивість image-mask, але воно працює тільки в Chrome та Safari.

border-image відмінно підтримується всіма браузерами, але більше пристосований для звичайних рівних меж зображення.