Pour concevoir un effet miroir, ou reflet, sur un texte HTML, vous pouvez utiliser les propriétés CSS transform et transform-origin, ainsi que la fonction linear-gradient() qui permet de créer une image avec un dégradé.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment créer un effet reflet et miroir en CSS ?</title>
<style>
.miroir {
position: absolute;
color: black;
font-size: 54px;
}
.miroir::after {
content: attr(data-miroir);
position: absolute;
top: 0;
left: 0;
transform-origin: bottom;
transform: rotateX(180deg);
line-height: 0.85em;
background-image: linear-gradient(0deg, #000 0, transparent 99%);
-webkit-background-clip: text;
color: transparent;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="miroir" data-miroir="1FORMATIK.com">1FORMATIK.com</div>
</body>
</html>
Une démo de l'effet miroir en CSS est disponible sur le Bac à codes.
