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