Сейчас есть тенденция к выходу за рамки привычных подходов использования прямоугольных блоков в веб-дизайне благодаря новым технологиям. Одно из мест, где все обычно прямоугольное, — это изображения. Они чаще всего имеют прямоугольную форму и располагаются в прямоугольной же сетке. Так происходит частично из-за удобства, частично из-за недостатка воображения или знаний у веб-дизайнеров и частично из-за того, что для состаривания изображения в программе Photoshop, создания у него немного рваных, нечетких краев, требуется много сил и времени. Но с помощью режима наложения можно получить необычные результаты малой кровью. 

Для начала выберем подходящее изображение:

Основное изображениеА затем подберем изображение с нечеткими краями, создающими эффект состаренности, и сплошным центром. Подобные изображения можно найти на большом количестве сайтов:

Фоновое изображениеЧерно-белые сильно сжатые 16 или 32-битные изображения в формате png наилучшим образом подойдут для создания подобных рамок.

Фоновые изображения для изображений 

В принципе, почти любой элемент HTML может иметь фоновое изображение, включая элемент изображения. К сожалению, в нашем случае фоновое изображение будет находиться в том же слое, что и основное изображение, к которому оно применяется, и нельзя будет использовать режим наложения. Вместо этого поместим элемент изображения в блок с собственным фоновым изображением:

<div>
    <img src="citroën.jpg" alt="HDR Photograph of a battered silver Citroën 2CV">
</div>

Код CSS:

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

Определить подходящий режим наложения может быть несколько сложно, и он будет зависеть от цвета фона блока. При использовании белого фона и рамки, показанной выше, наилучшим вариантом будет режим экрана:

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

Результат можно увидеть ниже:

Другие варианты 

Конечно, существуют и другие варианты, хотя они проявляют недостатки:

•  У браузеров на движках Webkit и Blink есть свойство image-mask, но оно нестандартное и его не поддерживают браузеры на других движках.

•  Свойство border-image широко поддерживается браузерами, но оно больше подходит для эффекта прямоугольной рамки из повторяющихся изображений.

В целом, режим наложения предоставляет наилучшие возможности для несложного создания нечетких краев у разных изображений.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также: