80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
|
<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>
|