I have a puzzling question that I just can't seem to solve.
My goal is to display a shimmer effect on cards as a temporary placeholder until the actual content loads. I found some CSS code in this answer, but when I tried it with a dark background, the color of the diagonal shimmer turned black instead of the desired color. It seems like the color of the shimmer is somehow influenced by the page's background color.
Take a look at the provided code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body{
background-color: black;
}
/* Float four columns side by side */
.column {
float: left;
width: 100px;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the counter cards */
.card {
height: 150px;
text-align: center;
background-color: #f1f1f1;
}
.shimmer {
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 10%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 2.5s infinite;
max-width:200px;
}
.starting{
margin-left: -10px
}
@keyframes shimmer {
100% {-webkit-mask-position:left}
}
</style>
</head>
<body>
<div class="row">
<div class="column shimmer starting">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
<div class="column shimmer">
<div class="card">
</div>
</div>
</div>
</body>
</html>
Check out the JSFiddle link for a live demo: JSFiddle