Background blend mode

Mix-blend-mode

Background-blend-mode

(Цвет 1)

#28342F

(Цвет 2)

#DCB683

Инструкция

(скрыть)

C помощью background-blend-mode можно сделать улучшенную версию привычных режимов наложения почти, как в фотошопе. Можно добавить несколько фоновых изображений одному объекту и задать им разные режимы наложения. В случае, если нужно уменьшить прозрачность одного из слоев - это стоит сделать до загрузки в фигме или фотошопе.

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

1. Добавьте на страницу шейп, загрузите в него фоновое изображение. Задайте шейпу класс.
2. Добавьте в форму ссылки на изображения, которые будут у объекта. Вы можете указать только 2 изображения, если не нужно третье.
3. Задайте режим наложения для второго и третьего изображения.
4. Если хочется — задайте режим наложения для всего шейпа.
5. Скопируйте код и вставьте в блок T123.

Важно

Обязательно проверяй результат в таких браузерах как Safari и Firefox. Если эффект не работает, то задумайся об отдельной странице для этих браузеров или отдельном блоке.

<!-- Code by Fedyaeva -->
<style>
     :root {
        --background-image-1: url();
        --background-image-2: url();
        --background-image-3: url();
        --blend-mode-1: normal;
        --blend-mode-2: normal;
        --block-mode: normal;
    }
    .class {
        mix-blend-mode: var(--block-mode);
    }
    .class .tn-atom {
        background-blend-mode: var(--blend-mode-1), var(--blend-mode-2);
        background-image: var(--background-image-1), var(--background-image-2), var(--background-image-3)!important;
    }
</style>

Связаться

Закинуть на кефас

Если ты пользуешься моими эффектами для тильды и хочешь меня поблагодарить — ткни на одну из кнопок