Задача: Необходимо сделать цвет текста градиентом, но в свойстве «color» нельзя задать градиент.
Пример:
Как сделать градиент текста в CSS
Решение: Т.к. тексту нельзя задать градиентное значение в «color», используем следующий вариант HTML + CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
class="gradient-text">КАК СДЕЛАТЬ ГРАДИЕНТ ТЕКСТА В CSS
.gradient-text {
/* Запасной вариант цвета фона. */
background-color: red;
/* Задаем градиент. */
background-image: linear-gradient(45deg, #f3ec78, #af4261);
/* Размер фона и повторение свойства. */
background-size: 100%;
background-repeat: repeat;
/* Используем текст в качестве маски для фона. */
/* Это покажет градиент как цвет текста, а не элемент background. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;}
|
