Today, we are going to view an interesting CSS property named mix-blend-mode to change the color of some text based on the current background color of its parent. This feature is very useful in progressive loadings, for example, or progressive bars.
The Markup
This is the easiest part, we have to define the HTML like this:
<div class="container">
<div class="background"><div class="text"></div></div>
</div>The .container defines the wrapper of our example. The .background element contains the text and we will use it to create an animation of progressive bar. Finally, the .text element will contain the current number of the loading.
The styles
Let's add some CSS code to get it better:
.background {
background-color: red;
animation: loading 10sTime linear infinite;
}We also need to create the loading animation:
@keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}To simulate the loading animation, we need another animation, and of course make some better styles.
.text {
color: red;
width: 200px;
border: 1px solid red; &:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
animation: percentage $loadingTime linear infinite;
}
}
/* Sass code */
@keyframes percentage {
@for $i from 1 through 100 {
$value: $i + "%";
#{$value} {
content: $value;
}
}
}
The color swap
Finally, we need to set the mix-blend-mode to the pseudo element and it will works!
.text:after {
color: white;
mix-blend-mode: difference;
}The final example