JavaScript Programming
JavaScript > Code Examples
3d text effects
3d text effects
<html>
<head>
<title>Letras 3D - Happy Codings :-) JavaScript Code Examples</title>
<style>
body { background:silver; font-family:Arrus BT,Garamond,Times New Roman; }
div { position:absolute; }
</style>
<head>
<body>
<style>
.info { font-family:Times New Roman; positon:relative;}
.light { top:-1; left:-1; color:white;}
.shade { top:+1; left:+1; color:pink; }
.fill { top:0; left:0; color:red; } </style>
<!--- example #0 --->
<div class="info">
<div class="light"> <i>example 0</i> </div>
<div class="shade"> <i>example 0</i> </div>
<div class="fill"> <i>example 0</i> </div>
</div>
<br><br><br>
<!--- example #1 --->
<style>
.shade1 { top:+5; left:+5; color:black; }
.fill1 { top:0; left:0; color:red; }
</style>
<div class=example1>
<div class="shade1"> <center><h1>Shadow</h1></center></div>
<div class="fill1"> <center><h1>Shadow</h1></center></div>
</div>
<br><br><br>
<!--- example #2 --->
<style>
.light2 { top:-1; left:-2; color:white; }
.shade2 { top:+1; left:+2; color:black; }
.fill2 { top:0; left:0; color:silver; }
</style>
<div class=example2>
<div class="light2"> <center><h1>Emboss Background example</h1></center> </div>
<div class="shade2"> <center><h1>Emboss Background example</h1></center> </div>
<div class="fill2"> <center><h1>Emboss Background example</h1></center> </div>
</div>
<br><br><br>
<!--- example #3 --->
<style>
.light3 { top:-2; left:-2; color:white; }
.shade3 { top:+2; left:+2; color:lightblue; }
.fill3 { top:0; left:0; color:blue; }
</style>
<div class=example3>
<div class="light3"><center><h1>Emboss Color example</h1></center></div>
<div class="shade3"><center><h1>Emboss Color example</h1></center></div>
<div class="fill3"><center><h1>Emboss Color example</h1></center></div>
</div>
<br><br><br>
<!--- example #4 --->
<style>
.light4 { top:-2; left:-2; color:yellow; }
.shade4 { top:+2; left:+2; color:yellow; }
.fill4 { top:0; left:0; color:darkgreen; }
</style>
<div class=example4>
<div class="light4"><center><h1>Color Highlight example</h1></center></div>
<div class="shade4"><center><h1>Color Highlight example</h1></center></div>
<div class="fill4"><center><h1>Color Highlight example</h1></center></div>
</div>
</body>
</html>
