Comment créer un effet 3D sur un texte HTML en CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-03-02 12:20:23

Question

Comment peut-on créer un effet 3D sur un texte HTML en CSS ?

Réponse

Pour créer un effet 3D sur un texte HTML, en CSS, vous pouvez utiliser la propriété CSS text-shadow :

<!DOCTYPE HTML>  
<html>
<head>
<meta charset="utf-8">
<title>Comment créer un effet 3D sur un texte HTML en CSS ?</title>
<style> 
.effet_3D { 
margin: 350px auto; 
text-align: center; 
color: black; 
font-size: 10em;
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd, 0 5px 0 #ddd, 0 6px 0 #ddd, 0 7px 0 #ddd, 0 8px 0 #ddd, 0 9px 0 #ddd, 0 10px 0 #ddd, 0 11px 0 #ddd, 0 12px 0 #ddd, 0 20px 30px rgba(0, 0, 0, 0.7); 
} 
</style>
</head> 
<body>  
<span class="effet_3D">1FORMATIK.com</span>
</body> 
</html>

Vous trouverez d'avantage d'informations sur la propriété text-shadow via cette page du site de Mozilla.