Делаем рамку для изображения с помощью режимов наложения

Делаем рамку для изображения с помощью режимов наложения

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

Сперва, надо найти подходящее изображение:

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

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

Фоновое изображение на самом изображении

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

<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%; }

Определение нужного режима наложения слегка запутано и меняется в зависимости от фона контейнера. Если фон и рамка имеют белый цвет, то лучшим вариантом будет screen:

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

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

Другие способы

Существуют и другие способы, хотя у обоих есть свои недостатки:

Для –webkit- браузеров есть свойство image-mask, но оно работает только в Chrome и Safari.

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree