Как сделать текст с градиентом?

Иногда нужно оформить текст ярко и необычно — например, задать ему градиент. В Taptop вы можете задать в стилях текста только его цвет, опции градиента там нет. Как же добиться желаемого эффекта? Разберемся, какие параметры нужно использовать, чтобы добавить тексту градиент.

Смотрите видео:

Пошаговая инструкция

Шаг 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:

Добавьте дополнительный класс к нужному элементу.

Настройте градиентный фон.

Включите опцию Обрезать фон для текста.

Сделайте цвет текста прозрачным.