Home 
Text animations Here
3D text All
Credits:
Contributor name: Raul
R. Edwards
Homepage: Software
Angel
Description: "These are examples for graphics and 3D lettering without GIF or JPEG images. With this style of lettering, pages will load faster than ever. This page can be viewed with Netscape Navigator 4+ or Internet Explorer 4+" -Raul R. Edwards
From Dynamicdrive.com: DHTML still has a long way to go in terms of fully replacing images when creating 3D text. While it is quite possible and easy to create DHTML text in IE 4+, it's a different story in NS 4. In fact, because of the way NS handled this script, we had to alter the default look of this script page so the script is not enclosed inside a table (otherwise, the text gets positioned in a "funny" way). This script is featured more for DHTML developer's sake- take a look at the script's source, and learn from the techniques used to render the 3D text.
Demo: (Try highlighting the text below to verify that they are indeed text!)
Written by
Directions: No directions are available for the use of this script.
Developer's view:
<html>
<head>
<!----------------- PLEASE ATTACH THIS IF USED -------------->
<meta name=author
content="Raul R. Edwards">
<meta name=copyright
content="Software Angel, Inc. (c) April 1, 1999"> <meta license=GNU
content="GNU General Public License Version 1.2
as published by the Free Software Foundation"
<!----------------------------------------------------------->
<style>
body { background:silver; font-family:Arrus BT,Garamond,Times New Roman; }
div { position:absolute; }
</style>
<title>Emboss & 3D Letters</title>
<head>
<body>
Written by<br>
<style>
a { text-decoration: none; color:maroon; vlink:maroon; alink:red;}
a:hover {color: red }
.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>
<div class="info">
<div class="light">
<i>Software Angel, Inc.</i>
</div>
<div class="shade">
<i>Software Angel, Inc.</i>
</div>
<div class="fill">
<i>
<a href="mailto:rre@scs.howard.edu"
onmouseover="status='Software Angel, Inc. © 1999'; return true;"
onmouseout="status='Emboss & 3D Letters'; return true;">
Software Angel, Inc.</a>
</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>
Copyright (c) 1998, 1999 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
