Full version: jsB@nk » Text » 3D text All
URL: https://www.javascriptbank.com/3d-text-all.html
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.
Full version: jsB@nk » Text » 3D text All
URL: https://www.javascriptbank.com/3d-text-all.html
<style>body { background:silver; font-family:Arrus BT,Garamond,Times New Roman; }div { position:absolute; }</style><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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div class="info"><div class="light"><i>JavaScriptBank.com</i></div><div class="shade"><i>JavaScriptBank.com</i></div><div class="fill"><i><a href="http://JavaScriptBank.com"onmouseover="status='http://JavaScriptBank.com'; return true;"onmouseout="status='Emboss & 3D Letters'; return true;">JavaScriptBank.com</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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->