Comment créer un effet reflet et miroir en CSS ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-03-01 10:00:19
Thèmes : webmaster - css - html
Question

Bonjour, je cherche à concevoir un effet reflet et miroir sur un texte HTML en CSS ?

Réponse

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.