От автора: в последнее время Джен Симмонс и другие призывают к революции в в веб-дизайне, Джен говорит, что нужно «мыслить за пределами известного» за счет использования новых технологий. Вопрос изображений вносит существенный вклад в известную парадигму: края изображений почти всегда ровные, а сами изображения прямоугольны, если только не заключены в круг; отчасти все это из-за удобства, отсутствия воображения или необходимых знаний в веб-дизайне, а отчасти потому, что придать краям изображения уникальную форму требовало затраты нескольких часов в фотошопе. Но с помощью режимов наложения можно добиться превосходных результатов за минимальное время.
Сперва, надо найти подходящее изображение:
Затем найти изображение рамки с потертыми краями и темным монотонным центром. В сети полно шаблонов для фотошопа, как этот:
Чтобы добиться лучшего эффекта, как правило подойдет плотно сжатое изображение в серых тонах, 16 или 32 бит формата PNG.
Фоновое изображение на самом изображении
В принципе, почти на всех HTML элементах работает свойство background-image, даже на самом изображении. Но к сожалению, при таком раскладе, фоновое изображение ложится на тот же слой, что и само изображение, и режим наложения не работает. Вместо этого, мы поместим наше изображение в контейнер, к которому применим свойство background-image с нашим шаблоном:
|
1 2 3 |
<div> <img src="citroën.jpg" alt="HDR Photograph of a battered silver Citroën 2CV"> </div> |
CSS
|
1 2 3 4 5 6 |
div { background-color: #fff; background-image: url(masque-24.png); background-size: cover; } div img { width: 100%; } |
Определение нужного режима наложения слегка запутано и меняется в зависимости от фона контейнера. Если фон и рамка имеют белый цвет, то лучшим вариантом будет screen:
|
1 |
div img { mix-blend-mode: screen; } |
Результат такой же, как и в шапке новости.
Другие способы
Существуют и другие способы, хотя у обоих есть свои недостатки:
Для –webkit- браузеров есть свойство image-mask, но оно работает только в Chrome и Safari.
border-image отлично поддерживается всеми браузерами, но больше приспособлен для обычных ровных границ изображения.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
