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

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

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

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

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

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

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

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

linear-gradient()

background-clip

text-fill-color

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

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

CSS

1background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

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

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

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

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

CSS

1background-clip: text;

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

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

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

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

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

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

READ
Соображения в основе макета Flexbox

CSS

1text-fill-color: transparent

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

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

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

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

Автор: Tejashwa Rajvardhan

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий