Хотя они не полностью совместимы с браузерами, есть способы ненавязчивого создания чистых текстовых градиентов CSS с небольшим количеством хитрости. Ключ заключается в использовании сочетания селекторов атрибутов, свойств, специфичных для веб-набора, и пользовательских атрибутов HTML.
Финальный простой HTML
|
1
|
<h1 data-text=»Hello World»> Hello World </h1>
|
Используя пользовательские атрибуты, мы можем подключиться к этим значениям из нашей таблицы стилей с помощью функции attr() .
Финальный CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
/* Select only h1s that contain a ‘data-text’ attribute */
h1[data-text] {
position: relative;
color: red;
}
h1[data-text]::after {
content: attr(data-text);
z-index: 2;
color: green;
position: absolute;
left: 0;
-webkit-mask-image: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(0,0,0,1)),
color-stop(40%, rgba(0,0,0,0))
);
|
Примечание: Пол сослался на еще более лаконичный метод в комментариях. Обязательно проверьте это!