A Shimmer Effect is much in trend to produce an illusional glass effect on articles, texts, or images. This might seem a very extravagant property from only some CSS frameworks but the fun part is we can do it using CSS and its properties very easily.
First of all, create a div container with an article tag and add dummy lines in the code. Style the position relative to this article tag. Add a shimmer div where we’ll be creating the magic. Then add basic styling to the current div tags. The position for this shimmer class should be kept relative.
Then finally, add styling to the shimmer tag. It mainly has 2 components to add style.
- Key-Frames – Here you will give the path of the transformation from where to where it will go. It can be vertical or horizontal according to your requirement for alignment.
- Animation – Add timeframe of the animation and infinite linear i.e. the orientation of the animation.
Example: Here is the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Shimmer Effect using CSS</title>
</head>
<body>
<div class="container">
<article>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="shimmer"></div>
</article>
</div>
</body>
</html>
|
CSS
article{
background: #ddd;
width: 100%;
position: relative;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
}
article .line{
width: 100%;
height: 20px;
background: #bbb;
margin: 20px 0;
border-radius: 5px;
}
article .shimmer{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(100deg,
rgba(255,255,255,0) 20%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0) 80%);
animation: shimmer 2s infinite linear;
}
@keyframes shimmer{
from {
transform: translateX(-200%);
}
to{
transform: translateX(200%);
}
}
|
Output:
Shimmer Effect using CSS