Как сделать градиентный текст

Градиентный текст

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

Использование mix-blend-mode

Свойство mix-blend-mode определяет режим наложения цвета текста на фоновый цвет. Подобные режимы наложения можно увидеть в графических редакторах вроде Photoshop, соответственно, идея наложения и названия режимов позаимствованы оттуда.

Перед применением этого метода текст надо обернуть в какой-нибудь элемент (

и др.) и установить для него родителя. Мы сделаем такую структуру:

для текста.

ставим белый цвет фона и свойство mix-blend-mode со значением screen (пример 1).

Пример 1. Свойство mix-blend-mode

Результат данного примера показан на рис. 1.

Рис. 1. Градиентный текст

Минусы

Плюсы

-webkit-text-fill-color нужен для того, чтобы убрать исходный цвет у самого текста, без этого свойства метод работать не будет (пример 2).

Результат данного примера показан на рис. 2.

Рис. 2. Градиентный текст

Минусы

Плюсы

Таким образом, для фона веб-страницы, отличного от белого, подходит исключительно второй метод. Если же у вас белый цвет фона, то лучше использовать первый метод, поскольку в нём применяются стандартные свойства, которые будут поддерживаться браузерами и в дальнейшем.

Источник

Как сделать градиентный текст в фотошопе

Как сделать градиентный текст в фотошопе

Сегодня мы будем создавать градиентный текст.

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

Сначала мы создадим новый документ и зальем фоновый слой черным цветом.

Затем установим шрифт из папки с исходниками и при помощи инструмента Текст напишем текст.

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

После этого в уроке «Как сделать градиентный текст в фотошопе» добавим к каждому слою с буквой стиль слоя Наложение градиента и для каждой буквы создадим новый градиент.

Создаем в фотошоп (Ctrl+N) новый документ с параметрами, как на рисунке ниже.

В панели слоев щелкаем по «замочку» у фонового слоя, чтобы разблокировать слой для дальнейшего редактирования.

Переименовываем фоновый слой в «Фон». Чтобы переименовать слой, дважды щелкните по имени слоя в панели слоев, введите новое имя и нажмите клавишу Enter.

Заливаем слой «Фон» черным цветом. Для этого переходим в меню Редактирование-Выполнить заливку и в появившемся окне в верхней строке выбираем черный оттенок.

Устанавливаем шрифт из папки с исходниками. Для этого щелкните ПКМ по файлу шрифта и выберите «Установить». После этого шага шрифт установится одновременно в программу фотошоп и систему.

Активируем инструмент Текст. Растягиваем рамку создания текста на всю ширину документа и пишем слово «Aurora». В верхней панели настроек инструмента Текст выбираем шрифт, что установили в предыдущем шаге, увеличиваем размер текста, меняем цвет текста на # ffffff и вводим настройки, как на рисунке ниже. В верхней панели настроек инструмента Текст кликаем по панели символов и меняем настройки на следующие. При помощи инструмента Перемещение располагаем текст по центру холста.

В панели слоев кликаем ПКМ по текстовому слою и выбираем «Растрировать текст».

Активируем инструмент Прямолинейное лассо и создаем выделение первой буквы «A». Кликаем ПКМ по холсту и выбираем «Вырезать на новый слой». После этого появится новый слой с буквой «A». Переименовываем образовавшийся слой в «A».

В панели слоев делаем активным текстовый слой и при помощи инструмента Прямолинейное лассо создаем выделение второй буквы. Вырезаем букву на новый слой, переименовываем образовавшийся слой в «U». Повторяем действия для всех букв слова. После того, как вырезали букву и переименовали, то снова в панели слоев делаем активным текстовый слой. В итоге у нас должно получиться 6 слоев с буквами и оригинальный текстовый слой, который стал пустой. Скрываем его видимость, нажав в панели слоев на «глазик» около слоя.

В панели слоев дважды щелкаем по первой букве (слой «A»), чтобы открыть стили слоя.

Во вкладке Наложение градиента кликаем по строке выбора градиента, чтобы открыть Редактор градиентов. В Редакторе градиентов создаем новый градиент. Для этого кликаем по нижним Контрольным точкам и вводим новые оттенки. Если в активном на данный момент градиенте есть более трех Контрольных точек, удаляем лишние, нажав сперва на Контрольную точку, затем – на клавишу Delete. Чтобы добавить новую Контрольную точку, кликните мышью в нижней части Редактора градиентов, непосредственно под градиентом и перетащите образовавшуюся Контрольную точку в нужную позицию. При необходимости введите числовое значение позиции в соответствующем окне.

Меняем оттенки на следующие:

Левая Контрольная точка (позиция 0%) –оттенок # 4b42f3;

Центральная Контрольная точка (позиция 50%) – оттенок # de1177;

Правая Контрольная точка (позиция 100%) – оттенок # fffc00.

Для верхних Контрольных точек устанавливаем 100% прозрачность.

Полные настройки для вкладки Наложение градиента на последнем скриншоте.

Результат после применения стилей слоя.

Добавляем к каждому слою с буквой стиль слоя Наложение градиента и создаем новые градиенты. Я напишу оттенки, которые использовала и покажу скриншоты стиля слоя Наложение градиента.

Левая Контрольная точка (позиция 0%) –оттенок # 1b1bf6;

Центральная Контрольная точка (позиция 50%) – оттенок # 1edcde;

Правая Контрольная точка (позиция 100%) – оттенок # 610786.

Для верхних Контрольных точек устанавливаем 100% прозрачность.

Левая Контрольная точка (позиция 0%) – оттенок # 0d7492;

Центральная Контрольная точка (позиция 50%) – оттенок # 0e9431;

Правая Контрольная точка (позиция 100%) – оттенок # fffc00.

Для верхних Контрольных точек устанавливаем 100% прозрачность.

Левая Контрольная точка (позиция 0%) – оттенок # 9600ff;

Центральная Контрольная точка (позиция 50%) – оттенок # ff7200;

Правая Контрольная точка (позиция 100%) – оттенок # fcfb98.

Для верхних Контрольных точек устанавливаем 100% прозрачность.

Левая Контрольная точка (позиция 0%) – оттенок # 6719e0;

Центральная Контрольная точка (позиция 50%) – оттенок # 30c66c;

Правая Контрольная точка (позиция 100%) – оттенок # ff7c00.

Для верхних Контрольных точек устанавливаем 100% прозрачность.

Левая Контрольная точка (позиция 0%) – оттенок # 0eebf3;

Центральная Контрольная точка (позиция 50%) – оттенок # ffc000;

Правая Контрольная точка (позиция 100%) – оттенок # b400ff.

Для верхних Контрольных точек устанавливаем 100% прозрачность.

Вот что у нас должно получиться в результате.

Градиентный текст готов! Урок «Как сделать градиентный текст в фотошопе» завершен.

Источник

Градиент для текста на CSS

У нас есть обычный заголовок белого цвета на темном фоне. Поместим наш заголовок в центре, используя технологию flexbox.

Gradient

// CSS код
.container <
width: 100%;
height: 100vh;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background-color:#0E2431;
>

.title <
font-family: sans-serif;
font-size: 5rem;
font-weight: 900;
text-transform: uppercase;
color: white;
>

Пропишем линейный градиент для заголовка. Этот градиент плавно перемещается по прямой снизу вверх, от розового цвета к голубому. Для построения красивых градиентов не нужно держать в голове все эти комбинации кода. Сейчас существуют генераторы градиентов, например webgradiets.

.title <
background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
>

Но, никакого чуда не произошло и градиент применился к фону блока, внутри которого приписан текст.

Как задать градиент для самого заголовка? Существует такое CSS свойство, как background-clip. После применения данного свойства (обязательно с префиксом) со значением text, фон окрасится цвет в цвет заголовка, в нашем случае в белый цвет. Таким образом данное свойство применится только к тесту.

.title <
-webkit-background-clip: text;
>

Почему же заголовок снова стал белым? На самом деле градиент есть, только мы его не видим из-за белого цвета у заголовка. Поменяем цвет заголовка на прозрачный, через специальное свойство text-fill-color (с префиксом -webkit).

.title <
-webkit-text-fill-color: transparent;
>

И последнее, заменим белый цвет на один из цветов градиента на случай, если специфичные градиентные свойства не сработают в других браузерах. Далеко не все браузеры поддерживают эти новшества. Поэтому для корректного отображения цвета текста (максимально приближенного к макету сайта), мы и добавляем дополнительный цвет. На момент написания статьи, свойство text-fill-color не поддерживается только IE11 из числа более-менее современных браузеров.

На современных браузерах мы получим текст с градиентом, а на старых браузерах однотонный цвет, наиболее подходящий под фон сайта.

Источник

Этот текст будет иметь градиент сверху

Красивое наложение градиента текста

Далее идет второй вариант:

Радужная текстовая анимация при наведении

Создать наложение градиента текста

Если (текстовые) градиенты являются большой частью вашего брендинга, вы можете разделить эту функцию на две части: класс, который отображает ваш градиент как обычный фоновый рисунок, и другой класс для закрепления любого фона в этом тексте.

Это позволяет вам легко делать две вещи:

1. Добавьте один и тот же градиент или шаблон как в текст, так и в качестве фона для обычных элементов.
2. Создавайте различные наложения текста без необходимости повторять свойства отсечения.

На этом все!Страна: (RU)