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

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

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

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

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

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

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

linear-gradient()

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

background-clip

text-fill-color

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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Автор: Tejashwa Rajvardhan

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

Редакция: Команда webformyself.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

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

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.