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 добиться красивых эффектов, которые оживят ваши изображения. Вы можете скачать архив с файлами, чтобы просмотреть исходники и лучше ознакомиться с материалом. Желаем творческих успехов!
Оставить комментарий