Как сделать текст с градиентом?
Иногда нужно оформить текст ярко и необычно — например, задать ему градиент. В Taptop вы можете задать в стилях текста только его цвет, опции градиента там нет. Как же добиться желаемого эффекта? Разберемся, какие параметры нужно использовать, чтобы добавить тексту градиент.
Смотрите видео:
https://vk.com/video-219751701_456239271
Пошаговая инструкция
Шаг 1: Выберите текст
Кликните по нужному текстовому элементу. В нашем примере для текста создан класс heading-5, который задает его стили — шрифт, начертание, размер, межбуквенное расстояние. По умолчанию текст черного цвета.
Шаг 2: Создайте новый класс для градиента
Добавьте элементу дополнительный класс — например, gradient-text.
Шаг 3: Задайте классу градиентный фон
В стилях класса gradient-text в разделе Внешний вид → Фон выберите тип Градиент.
Настройте градиент: добавьте несколько цветовых точек (например, розовый, синий и зелёный) и задайте угол (например, 135°).
В результате у текстового блока будет добавлен градиент на фоне.
Шаг 4: Обрежьте фон под текст
Чтобы градиент применялся не ко всему блоку, а только к текстовым символам, добавьте опцию Обрезка фона и выберите параметр Обрезать фон для текста.
В результате градиентный фон остался только у текста. Но мы его не видим, т.к. у текста задан цвет. Поэтому нужно сделать еще одну настройку.
Шаг 5: Сделайте текст прозрачным
В этом же классе установите цвет текста как прозрачный — прозрачность 0%.
Готово! Теперь текст залит градиентом.
Градиент для отдельных слов
Если нужно сделать градиент для отдельных слов в тексте, можно использовать два способа.
1 способ: разбить текст на несколько блоков
Вы можете создать несколько блоков с текстом. Например, каждую строку можно сделать отдельным блоком или разбить одну строку на части.
В этом случае вы можете добавить созданный для градиента класс к нужному блоку — и градиент применится только для него.
Пример: Вторая строка — это отдельный текстовый блок.
Добавьте элементу класс gradient-text — и текст этой строки будет залит градиентом.
Таким образом можно добавить класс с градиентом к одному или нескольким элементам.
2 способ: использовать панель Встроенный текст
Вы можете выделить одно или несколько слов в тексте и использовать настройки в правой панели — Встроенный текст.
1. В классе с градиентом сбросьте цвет текста. Для этого выберите класс gradient-text. Затем в разделе Текст найдите параметр цвета и сбросьте его (Shift + мыши).
Цвет вернется к исходному значению — черный с прозрачностью 100%.
2. Выделите нужное слово или слова — справа откроется панель Встроенный текст.
Задайте прозрачность 0%.
Готово! Теперь нужный текст прозрачный, и на нем появился градиент.
Резюме
Чтобы сделать текст с градиентом в Taptop:
- Добавьте дополнительный класс к нужному элементу.
- Настройте градиентный фон.
- Включите опцию Обрезать фон для текста.
- Сделайте цвет текста прозрачным.