back.jpg (333 bytes)
Home | New | Forum | FAQ | Submit

Home Small4.gif (1046 bytes) Text animations Small4.gif (1046 bytes) 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

Software Angel, Inc.
Software Angel, Inc.
Software Angel, Inc.



Shadow

Shadow




Emboss Background Example

Emboss Background Example

Emboss Background Example




Emboss Color Example

Emboss Color Example

Emboss Color Example




Color Highlight Example

Color Highlight Example

Color Highlight Example

 

 

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. &copy 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 1998, 1999 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.

20 megs of FREE web space! Website Abstraction