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

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

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

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

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

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

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

linear-gradient()

background-clip

text-fill-color

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Tejashwa Rajvardhan

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

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

Метки:

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

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

Комментарии запрещены.