MANOJ´s H O M E C A G E

	Sign In Sign-Up

MANOJ´s H O M E C A G E

DHTML

3D text

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+" 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: Press here

<html> <head>  <meta name=author content="D.Manoj Kumar"> <meta name=copyright content="Joshjava (c) 2000"> -----------------------------------------------------------> <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>D. ManojKumar</i> </div> <div class="shade"> <i> D. ManojKumar </i> </div> <div class="fill"> <i> <a href="mailto:dmkumar@email.com" onmouseover="status=' D. ManojKumar '; return true;" onmouseout="status='Emboss & 3D Letters'; return true;"> D. ManojKumar </a> </i> </div> </div> <br><br><br>  <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>  <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>  <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>  <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>

[About Me]

[Help]