Спершу, треба знайти відповідне зображення:
Потім знайти зображення рамки з потертими краями і темним монотонним центром. У мережі повно шаблонів для фотошопа, як цей:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Щоб домогтися кращого ефекту, як правило підійде щільно стислий зображення в сірих тонах, 16 або 32 біт формату PNG.
Фонове зображення на самому зображенні
В принципі, майже на всіх HTML елементах працює властивість background-image, навіть на самому зображенні. Але на жаль, при такому розкладі, фонове зображення лягає на той же шар, що і саме зображення, і режим накладення не працює. Замість цього, ми помістимо наше зображення в контейнер, до якого можна застосувати властивість background-image з нашим шаблоном:
Визначення потрібного режиму накладення злегка заплутано і змінюється в залежності від фону контейнера. Якщо фон і рамка мають білий колір, то найкращим варіантом буде screen:
Результат такої ж, як і в шапці новини.
інші способи
Існують і інші способи, хоча в обох є свої недоліки:
Для -webkit- браузерів є властивість image-mask, але воно працює тільки в Chrome і Safari.
border-image відмінно підтримується всіма браузерами, але більше пристосований для звичайних рівних кордонів зображення.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі