15 вариантов стилизации фотографий с помощью CSS3
Karina | 13.10.2014
Большинство людей для обработки изображений используют Adobe Photoshop. Помимо всех преимуществ, в этой программе есть еще один весомый плюс, который дает ей возможность опережать конкурентов – режимы наложения слоев, или blending modes.
Такие режимы позволяют создавать интересные эффекты, смешивая несколько слоев. Кто хоть раз пользовался этой функцией в Adobe Photoshop, знает, какие широкие возможности она предоставляет. Но знаете ли вы, что режимы смешивания также доступны и в CSS? Сегодня мы рассмотрим это на примерах.
Поддержка браузерами
На сегодняшний день около 50% используемых браузеров поддерживают свойство background-blend-mode, включая новые версии Google Chrome, Opera и Mozilla Firefox. Браузер Internet Explorer на данный момент не отображает эти эффекты. Список версий браузеров можно просмотреть на сайте caniuse.com.
Как использовать режим наложения CSS3
С помощью свойства background-blend-mode можно смешать два изображения либо изображение и фон. Термин «основной цвет» означает исходный в изображении цвет, «совмещенный» – цвет, который накладывается, «результирующий» – цвет, полученный в результате наложения. Мы будем смешивать фотографию caracal.jpg и однотонный фон #eac071. Для этого зададим класс blend и создадим основной «каркас» CSS:
.blend {
width:680px;
height:423px;
background:#eac071 url("caracal.jpg") no-repeat center center;
}
Теперь можно создавать режимы смешивания, добавляя еще один класс и стиль. Ниже приведено 15 примеров.
Color Burn (затемнение основы)
Этот режим затемняет базовые цвета, делая картинку более контрастной. Создаем класс burn и прописываем стиль:
.blend.burn {
background-blend-mode: color-burn;
}
Результат:
Color (цвет)
Яркость основного цвета + насыщенность и цветовой тон совмещенного цвета = результат режима Color.
Color проявляет себя лучше всего при раскраске монохромных изображений.
.blend.color {
background-blend-mode: color;
}
Darken (замена темным)
Здесь из двух пикселей выбирается тот, который является более темным. Если основной цвет пикселя более светлый, чем у совмещенного, он заменяется более темным пикселем. Остальные пиксели не изменяются. При применении белого цвета результат не виден.
.blend.darken {
background-blend-mode: darken;
}
Difference (разница)
В режиме Difference вычитаются пиксели либо основного, либо совмещенного цвета. Это зависит от того, какой из них будет более ярким. Смешивание с черным цветом результата не дает, а при смешивании с белым основные цвета инвертируются.
.blend.difference {
background-blend-mode: difference;
}
Color Dodge (осветление основы)
Фильтр осветляет картинку и делает ее менее контрастной за счет замены основного цвета более ярким.
.blend.dodge {
background-blend-mode: color-dodge;
}
Exclusion (исключение)
Exclusion схож с режимом Difference, но изображение становится менее контрастным. Смешивание с белым и черным цветами приводит к аналогичным результатам, что и в Difference.
.blend.exclusion {
background-blend-mode: exclusion;
}
Hard Light (жесткий свет)
При необходимости осветлить или затемнить некоторые участки изображения используйте этот режим. Принцип его работы таков: если совмещенный цвет более темный, чем 50% серого, картинка затемняется. Если же совмещенный цвет светлее 50% серого, то картинка, соответственно, становится более светлой.
.blend.hard {
background-blend-mode: hard-light;
}
Hue (цветовой тон)
Режим Hue сочетает насыщенность и яркость основного цвета с цветовым тоном совмещенного.
.blend.hue {
background-blend-mode: hue;
}
Lighten (замена светлым)
В этом режиме картинка становится светлее. Выбираются те цвета, которые являются более светлыми.
.blend.lighten {
background-blend-mode: lighten;
}
Luminosity (яркость)
Luminosity – противоположность режиму Color. Здесь сочетается яркость совмещенного цвета с цветовым тоном и насыщенностью основного.
.blend.luminosity {
background-blend-mode: luminosity;
}
Multiply (умножение)
Здесь значения основного и совмещенного цветов перемножаются, и результирующий цвет всегда получается более темным.
.blend.multiply {
background-blend-mode: multiply;
}
Overlay (перекрытие)
При смешивании основного и совмещенного цветов яркие цвета осветляются, а темные – затемняются.
.blend.overlay {
background-blend-mode: overlay;
}
Saturation (насыщенность)
Светимость и цветовой тон основного цвета сочетается с насыщенностью совмещенного цвета.
.blend.saturation {
background-blend-mode: saturation;
}
Screen (осветление)
В этом режиме картинка становится более светлой. Смешивая изображение с белым цветом, в результате получится белый цвет. Черный цвет результата не дает.
.blend.screen {
background-blend-mode: screen;
}
Soft Light (мягкий свет)
В зависимости от совмещенного цвета, изображение станет либо светлее, либо темнее. Работа режима схожа с Hard Light, только здесь в результате получается более мягкий свет.
.blend.soft {
background-blend-mode: soft-light;
}
Подобрав подходящие для смешивания цвета, можно без использования Adobe Photoshop добиться красивых эффектов, которые оживят ваши изображения. Вы можете скачать архив с файлами, чтобы просмотреть исходники и лучше ознакомиться с материалом. Желаем творческих успехов!
Оставить комментарий