Если вы работали с Photoshop, то знаете, насколько мощным инструментом могут быть режимы смешивания цветов. Оказывается, большинство из них могут быть использованы и для создания различных CSS-эффектов.
Вот так будет выглядеть главная страница Medium, если изображениям на ней добавить фон lightblue
и применить режим смешивания background-blend-mode: difference
:
Это свойство смешивает цвета фонов, то есть для получения эффекта нужно добавить контейнеру несколько фоновых изображений и/или фоновый цвет.
Но работать можно не только с фонами. Свойство mix-blend-mode
позволяет смешивать с нижними слоями цвета самого элемента.
Например, можно получить вот такой классный эффект, просто добавив тексту цвет lightsalmon
и режим смешивания mix-blend-mode: color-dodge
.
Обратите внимание: в Chrome 58+ есть ошибка, из-за которой свойство mix-blend-mode
не работает на тегах body
или html
, если они имеют прозрачный фон.