Detailed explanation of the text-fill-color property in CSS3

What does text-fill-color mean? Just from the literal meaning, it means "text fill color", but it actually also sets the fill color of the text in the object, which is very similar to the effect of color. If you set both the text-fill-color and color properties at the same time, text-fill-color will override the color value.

Since text-fill-color is a new attribute of CSS3, when it comes to new attributes of CSS3, everyone will definitely ask about its compatibility effect? ? Hey, I can only say mercilessly that the compatibility is very poor. It is only effective for browsers with the WebKit kernel. . What a pity! ! Although it has poor compatibility, it can produce very cool text effects, such as flowing text, hollow text, etc.

To create flowing text, you can't just use text-fill-color. You also need to combine CSS3 animation to achieve the animation effect. Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        ._borderWrap{
            width: 180px;
            height: 150px;
            position: absolute;
            left: 23%;
            top: 25%;
        }
        ._border{
            line-height: 145px;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            -webkit-text-fill-color: transparent;
            background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
            background-size: 200%,100%;
            -webkit-background-clip: text;
            -webkit-animation: word 5s linear infinite;
        }
        @keyframes word {
            0%{background-position: 0 0}
            100%{background-position: -100% 0}
        }
    </style>
</head>
<body>
        <div class="_borderWrap">
            <div class="_border">Your name</div>
        </div>
</body>
</html>

Effect picture:

"Your name" is the flowing text I made, but the screenshot is static. If you want to see the dynamic effect, you need to run the code yourself!

Note that there are several key points in making flowing text: text-fill-color is generally set to transparent, and then use background-image and gradient colors to set the background color of the text, use background-clip to achieve text capture, and then use background-size to expand the background, so that the animation effect can be achieved when using animation.

Summarize

The above is the text-fill-color attribute in CSS3 that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Web developers are concerned about the coexistence of IE7 and IE8

>>: How to deploy hbase using docker

Solution to MySQLSyntaxErrorException when connecting to MySQL using bitronix

Detailed explanation of the text-fill-color property in CSS3

Solution to MySQLSyntaxErrorException when connecting to MySQL using bitronix

Use crontab command in Linux environment to set up scheduled periodic execution tasks [including PHP execution code]

MySQL 8.0.16 Win10 zip version installation and configuration graphic tutorial

Vue implements tree table through element tree control

How to use Vue's idea to encapsulate a Storage

Baidu Input Method opens API, claims it can be ported and used at will

This article will show you the basics of JavaScript: deep copy and shallow copy

Detailed explanation of mysql filtering replication ideas

How to quickly clean up billions of data in MySQL database

W3C Tutorial (7): W3C XSL Activities

Recommend

js realizes the effect of Tanabata confession barrage, jQuery realizes barrage technology

61 Things Every Web Developer Should Know

Mount the disk in a directory under Ubuntu 18.04

CSS removes the background color of elements generated when they are clicked on the mobile terminal (recommended)

MySQL helps you understand index pushdown in seconds

N ways to center elements with CSS

iFrame is a great way to use it as a popup layer to cover the background

Detailed explanation of incompatible changes in rendering functions in Vue3

Founder font library Chinese and English file name comparison table

Apache ab concurrent load stress test implementation method

Steps for Docker to build its own local image repository

Solution to navicat automatically disconnecting from the database after a period of time

A brief understanding of the differences between MySQL InnoDB and MyISAM

Methods to enhance access control security in Linux kernel

Solution to BT Baota Panel php7.3 and php7.4 not supporting ZipArchive