Drop Shadows in DHTML

Drop Shadows in DHTML

Drop Shadows in DHTML







Drop shadow text is something that would be used many times. Thus it is appropriate to put the class identifiers establishing the different drop shadow definitions into a file external to the current HTML document. The contents of the CSS file is as shown below.

text { position: absolute; top: 265px; left: 5px; color: #000000; z-index: 2; }
shadow1 { position: absolute; top: 262px; left: 2px; color: #CCCCCC; z-index: 0; }
shadow2 { position: absolute; top: 268px; left: 8px; color: #555555; z-index: 1; }

The text items making up the document header are duplicated where each duplication applies a different drop shadow class identifier as shown above.

<P>
<SPAN ID="shadow1"><H1>Drop Shadows in DHTML</H1></SPAN>
<SPAN ID="shadow2"><H1>Drop Shadows in DHTML</H1></SPAN>
<SPAN ID="text"><H1>Drop Shadows in DHTML</H1></SPAN>
</P>