Режимы наложения для текста в CSS

Привет, сегодня я покажу как можно сделать текст на сайте интереснее при помощи свежей CSS технологии blend-mode. Это аналог режимов наложения в фотошопе. Принцип работы простой:

  1. Создать контейнер, которому присвоить в качестве background любую картинку.
  2. Внутри этого контейнера необходимо создать другой блочный контейнер, т.к. необходимо чтобы этот внутренний контейнер занимал всю ширину (и возможно высоту) родительского контейнера.
  3. Этому дочернему контейнру присвойте белую подложку и цвет шрифта чёрный.
  4. Тепер самое главное, добавляем дочернему контейнеру свойство mix-blend-mode со значением lighten, что значит пиксели который “светлее” будут наверху. Так как подложка у нас белая, то в ней ничего не поменяется, а вот текст полностью заменится картинкой родительского контейнера.

Посмотреть можно на codepen.

Стоит сказать, что поддержка в браузерах привычная – практически всё кроме IE и браузера в Андроидах.

Leave a Reply

Your email address will not be published. Required fields are marked *