Создание многострочного градиентного фона для текста
10 февраля 2019 | Опубликовано в css | Нет комментариев »
Мы столкнулись с интересной задачей: создать многострочный градиентный фон для текста. Создать текст с фоном уже довольно непросто, а также нам, вероятно, пригодится свойство box-decoration-break (перенос блока оформления). Как оказалось, нам понадобятся еще некоторые приемы, чтобы все сработало.
Если бы подходил сплошной цвет, то внутренние отступы и свойство переноса блока оформления создали бы основную структуру:
Но градиент на нескольких строках с таким подходом будет выглядеть немного странно:
Matthias Ott предложил то, что выглядит как идеальное решение:
Секрет в том, чтобы задать многострочный фон с чисто белым текстом и черным фоном. После этого наложить псевдоэлемент поверх всей черной области, которая должна стать градиентной. После задания свойства mix-blend-mode: lighten; (режим наложения осветление) градиент появится только на черной области. Вот и все.
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
-
Вкусные образы в фотографиях Луизы Валиери
-
Яркий текстовый эффект с масками в Adobe Illustrator
-
Шоколадное вдохновение
-
Текстовый эффект в стиле Sci-fi
-
Цветочные рамки для вашего дизайна
-
Сайты с милой анимацией
-
Благородные паттерны от Дины Мошкало
-
Создание многострочного градиентного фона для текста
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58