Свойство CSS text-fill-color
Свойство -webkit-text-fill-color задаёт цвет заливки символов в тексте.
Если это свойство не указано, используется значение свойства color.
При использовании вместе с background-clip: text свойство -webkit-text-fill-color переопределяет свойство color для заливки текста.
INFO
Свойство -webkit-text-fill-color в основном используется вместе с -webkit-background-clip: text для создания эффектов градиентного текста. Примечание: Safari поддерживает background-clip: text, но не поддерживает стандартное свойство text-fill-color. Используйте -webkit-text-fill-color для кроссбраузерной совместимости.
DANGER
Свойство text-fill-color не полностью стандартизировано во всех браузерах. Не полагайтесь на него для production-сайтов без резервных вариантов, так как оно не будет работать у всех пользователей. Детали реализации могут различаться, а поведение может измениться в будущем.
| Начальное значение | currentColor |
|---|---|
| Применяется к | Ко всем элементам. |
| Наследуется | Да. |
| Анимация | Да. Цвет можно анимировать. |
| Версия | Стандарт совместимости |
| Синтаксис DOM | object.style.textFillColor = "#1c87c9"; |
Синтаксис
Значения CSS -webkit-text-fill-color
-webkit-text-fill-color: color | initial | inherit;Пример свойства text-fill-color:
Другой пример кода text-fill-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
font-size: 1.5em;
-webkit-text-fill-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-fill-color property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Результат
Пример свойства text-fill-color со значением «transparent»:
Пример свойства CSS text-fill-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
padding: 10px;
margin: 15px auto;
font-size: 18px;
}
p {
color: #444;
line-height: 1.6;
margin: 20px 0;
background: #E7E7E2;
}
q {
display: block;
margin: 25px 0;
text-transform: uppercase;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: #8e2b88;
-webkit-text-fill-color: transparent;
background: linear-gradient(to bottom, #ff0052, #8e2b88);
-webkit-background-clip: text;
background-clip: text;
}
q:before {
content: '';
}
</style>
</head>
<body>
<article>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
<q>
The text-fill-color property is used with -webkit- extension.
</q>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
</p>
</article>
</body>
</html>Пример использования свойства text-fill-color для установки горизонтального градиента:
Пример свойства text-fill-color со значением transparent
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
display: inline-block;
font-family: sans-serif;
font-weight: bold;
font-size: 40pt;
background: linear-gradient(to right, rgb(25, 76, 192), rgb(196, 26, 3) 20%, rgb(236, 190, 6) 40%, rgb(25, 76, 192) 60%, rgb(3, 116, 8) 80%, rgb(196, 26, 3));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets (CSS)</h1>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| color | Задаёт цвет заливки переднего плана текстового содержимого элемента. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что можно сказать о свойстве CSS 'text-fill-color' согласно информации на странице?