Как создать текстовый градиент с помощью CSS | Журнал "Вольт"
Пт. Окт 23rd, 2020


Как легко создавать текстовые градиенты с помощью CSS

От автора: градиент – это переход цветов от начальной и конечной точек, а линейный градиент постепенно перемещается по прямой линии к другому цвету. Градиенты – это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Свойство CSS background-clip позволяет очень легко реализовать градиенты для текста.

Синтаксис: как создавать текстовые градиенты

Во-первых, мы должны настроить шрифт с помощью h1 или любого тега по нашему выбору и разместить его там, где мы хотим. Я разместил свой шрифт в центре с помощью flexbox.

Как легко создавать текстовые градиенты с помощью CSS

Результат может быть достигнут с помощью:

линейный градиент ()

Практический курс по верстке адаптивного сайта с нуля!

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

фоновый клип

цвет заливки текста

1. Свойство linear-gradient ()

Как объяснялось выше, это свойство создает линейный градиент фона для текстового поля. В CSS линейный градиент реализован с помощью:

И результат будет:

Как легко создавать текстовые градиенты с помощью CSS

2. Свойство background-clip ()

Это свойство CSS определяет, простирается ли фон элемента ниже его границы, блока или блока содержимого.

Практический курс по верстке адаптивного сайта с нуля!

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

И после применения этого свойства наш текст будет выглядеть так:

Как легко создавать текстовые градиенты с помощью CSS

Теперь вам интересно, что случилось с линейным градиентом, который мы применили ранее, но, внимательно посмотрев на изображение, вы можете увидеть цвета, окружающие текст. Фон окрашен текстом переднего плана (обрезанным).

Из-за цвета текста мы не можем видеть цвет линейного градиента, поэтому мы используем наше третье и последнее свойство.

3. Свойство text-fill-color

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

И результат будет примерно таким:

Как легко создавать текстовые градиенты с помощью CSS

Посмотреть полный код на Codepen

Как легко создавать текстовые градиенты с помощью CSS

Автор: Теджашва Раджвардхан

Источник: https://dev.to

Сотрудники редакции: Команда Webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

PSD в HTML

Практика верстки сайта на CSS Grid с нуля

Посмотрите



Source link

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *