Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 27.02.2020

Наверх

Наверх

Нет комментариев

15 вариантов стилизации фотографий с помощью CSS3

15 вариантов стилизации фотографий с помощью CSS3

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

Оставить комментарий