If you are viewing this page with MSIE 4.0 or Netscape 4.0, the '3D Text' below should look different  than the '2D Text' underneath it. This effect can be done with an image editor, but I used Dynamic HTML here, as an example of what can be done with Dynamic HTML.

2D Text

In this example, I have sepated the Dynamic HTML layers more, and used a greater color range to increase the depth of the '3D Text'.

2D Text

Here, I just switched the Highlight color and the Main color of the '3D Text' to create a different text effect.

2D Text

Finally, so you can see the Dynamic HTML Layers that make up the '3D Text', I have sepated the layers even more. You will notice that the text consists of layers:

Base - this is an invisible layer for positioning.

Shadow - this is the shadow layer of the text, which is drawn first.

Highlight - then a highlighting layer is drawn on top of the shadow.

Text - finally, the main layer of text is drawn on top of the previous 2 layers.

2D Text

Using Dynamic HTML to create 3D Text, is an involved process. Hopefully the process will become easier in the future as Dynamic HTML becomes integrated into tools like FrontPage.

The first step is to define the styles for the 3 Layers of Text.

On the Format Menu, open the Stylesheet dialog.

You define your 3 styles for Shadow, Highlight and Text, between the style tags as follows:

<style> <!-- . . . --> </style>

Here are the styles I defined for my 3D Text, t3dbase, t3dshadow, t3dhighlight and t3dtext, for Base, Shadow, Highlight and Text respectively:

<style> <!-- .t3dbase{ font-family: book antiqua, Times New Roman, serif; font-size: 30px; color: rgb(153,0,77); z-index: 1; position: relative; top: 0px; left: -40px; } .t3dshadow{ font-family: book antiqua, Times New Roman, serif; font-size: 30px; color: rgb(0,0,0); z-index: 2; position: absolute; top: 0px; left: 2px; } .t3dhighlight{ font-family: book antiqua, Times New Roman, serif; font-size: 30px; color: rgb(200,0,100); z-index: 3; position: absolute; top: 0px; left: 0px; } .t3dtext{ font-family: book antiqua, Times New Roman, serif; font-size: 30px; color: rgb(153,0,77); z-index: 4; position: absolute; top: 0px; left: 1px; } --> </style>

Note: For non-FrontPage users, the Style Tags go in between the Head Tags.

The Parameters that I used for the styles are:

• font-family: the font to be used
• font-size: the size of the font (I used px for pixels)
• color: the color for the font
• z-index: I don't know if this makes much difference, but it indicates which drawing layer should be used
• position: positioning, relative for the Base layer, and absolute for the other layers.
• top: this is the positioning for the top of the line of text (vertical offset)
• left: this is the positioning for the left of the line of text (horizontal offset)

The next step is to define a single cell table to put your text in. Dynamic HTML works on the current HTML element. So by creating a single cell table, you are isolating the Dynamic HTML, so the positioning is relative only to the text in the cell.

Position your cursor within the table, then switch FrontPage to the HTML view. Copy and paste (or type) the following code between the Cell tags (td.../td), replacing the '3D Text' code, with the text that you want:

<script language="JavaScript"><!-- if (navigator.appVersion.substring(0,1) >= 4) { document.write("<P CLASS=t3dbase>&nbsp;"); document.write("<SPAN CLASS=t3dshadow>3D&nbsp;Text</SPAN>"); document.write("<SPAN CLASS=t3dhighlight>3D&nbsp;Text</SPAN>"); document.write("<SPAN CLASS=t3dtext>3D&nbsp;Text</SPAN>"); document.write("</P>"); } else document.write("<p align=\"center\"><font size=\"5\" color=\"#99004D\"><strong>3D Text</strong></font></p>"); // --></script> <noscript> <p align="center"><font size="5" color="#99004D"><strong>3D Text</strong></font></p> <p></noscript>

To support browsers, that do not recognize Dynamic HTML, I have enclosed the code in a JavaScript routine:

<td><script language="JavaScript"><!-- . . . // --></script><noscript>...</noscript></td>

The code inside the noscript tags is for non-javascript browsers, and is just a normal HTML line  for the text:

<noscript> <p align="center"><font size="5" color="#99004D"><strong>3D Text</strong></font></p> <p></noscript>

Inside the JavaScript routine, I first check for a version 4.0 browser:

if (navigator.appVersion.substring(0,1) >= 4) { . . . } else ...;

The code after the else, is for JavaScript browsers, that are below version 4, I use the document.write() method, to output HTML for those browsers:

document.write("<p align=\"center\"><font size=\"5\" color=\"#99004D\"><strong>3D Text</strong></font></p>");

Or a simplified version, without the font tag:

document.write("<p><strong>3D Text</strong></p>");

In the main body of the IF, I use the document.write() method to output the Dynamic HTML:

if (navigator.appVersion.substring(0,1) >= 4) { document.write("<P CLASS=t3dbase>&nbsp;"); document.write("<SPAN CLASS=t3dshadow>3D&nbsp;Text</SPAN>"); document.write("<SPAN CLASS=t3dhighlight>3D&nbsp;Text</SPAN>"); document.write("<SPAN CLASS=t3dtext>3D&nbsp;Text</SPAN>"); document.write("</P>"); }

The actual Dynamic HTML Code is:

<P CLASS=t3dbase>&nbsp; <SPAN CLASS=t3dshadow>3D&nbsp;Text</SPAN> <SPAN CLASS=t3dhighlight>3D&nbsp;Text</SPAN> <SPAN CLASS=t3dtext>3D&nbsp;Text</SPAN> </P>

The whole Dynamic HTML element is enclosed in a Paragraph (p ... /p) tag, this is also the base layer (class=t3base) and contains a single space (&nbsp;). Each displayed layer is a SPAN element within the Paragraph, using the class for the layer. I have also used Header (h1...h3) elements as the base layer, so there probably other elements that will work also.

Playing around is the best way to find out what works. If anyone finds some good documentation on this, please let me know. I got most of my information from the W3C Organization at: http://www.w3.org/TR/REC-CSS1 and http://www.w3.org/TR/WD-positioning

I have included these examples of my Style definitions, so that you can get an idea of how to adjust the settings.

 [Home] [ScrapBook] [Chat] [Links] [Contact] [FrontPage]
This page hosted by Get your own Free Home Page
JES - 03/28/98