Прозрачный текст на CSS

Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями.

Его значение multiply — это результат умножения верхнего и нижнего цветов. Черный слой остается черном, а белый не приводит к изменению. Благодаря этому можно сделать прозрачный цвет текста с темным фоном.

HTML:

CSS:

В итоге у нас получится это:

Пример:

Прозрачный текст

Но если мы сделаем фон светлее, например background: #337AB7, то он начнет просвечивать, а белый и вовсе будет прозрачным.

Пример с фоном #337AB7:

Прозрачный текст

Для того, чтобы текст был более заметный, можно добавить к нему тень.

Пример с тенью:

Прозрачный текст

Также стоит отметить, что для такого эффекта с прозрачным текстом подойдут только светлые фоновые изображения.

Похожие записи:

Добавить комментарий:

Ваш комментарий отправлен!