От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста.
Синтаксис: как создавать текстовые градиенты
Во-первых, мы должны настроить шрифт, используя h1 или любой тег по нашему выбору, и поместить его в желаемое место. Я разместил свой шрифт в центре, используя flexbox.
Результат может быть достигнут с помощью:
linear-gradient()
background-clip
text-fill-color
1. Свойство linear-gradient()
Как объяснялось выше, это свойство создает для текстового блока фоновый линейный градиент. В CSS linear-gradient реализуется с помощью:
|
1 |
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); |
И результат будет:
2. Свойство background-clip()
Это свойство CSS определяет, простирается ли фон элемента под его границей, блоком или блоком содержимого.
|
1 |
background-clip: text; |
И после применения этого свойства наш текст будет выглядеть так:
Теперь вам интересно, что случилось с линейным градиентом, который мы применили ранее, но, внимательно присмотревшись к изображению, вы можете увидеть цвета, окружающие текст. Фон окрашивается в текст переднего плана (обрезается).
Из-за цвета текста мы не можем видеть цвет линейного градиента, и потому мы используем наше третье и последнее свойство.
3. Свойство text-fill-color
Поскольку мы хотим видеть линейный градиент, который обрезается по тексту переднего плана, мы должны сделать цвет текста прозрачным, и мы можем достичь этого результата.
|
1 |
text-fill-color: transparent |
И результат будет примерно таким:
Посмотреть полный код на Codepen
Автор: Tejashwa Rajvardhan
Источник: //dev.to
Редакция: Команда webformyself.
