Full version: jsB@nk » Text » Fade-Glow » Outline/Shadow Text
URL: https://www.javascriptbank.com/outlineshadow-text.html
This sample shows how to build an interactive outline that expands and collapses.
Full version: jsB@nk » Text » Fade-Glow » Outline/Shadow Text
URL: https://www.javascriptbank.com/outlineshadow-text.html
<script><!--//Author: Anthony Ryan Delorie//My email: adelorie@hotmail.comfunction ShadeIt(message,range,color1,color2,extra) {var x = range;var y = range;document.write ("<span style='"+extra+" color:"+color2+"; position:absolute\; left:"+x+"; top:"+y+";'>"+message+"</span>");document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");}function OutIt(message, thickness, color1, color2, extra) {var x = -thickness;var y = -thickness;while (y<=thickness) {while (x<=thickness) {document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");x=x+1;}y=y+1;} document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><a href="javascript:OutIt('outline text', 1, 'silver', 'navy', 'font-size:40px;');">outline link</a> |<a href="javascript:ShadeIt('shadow text', 2, 'orange', 'maroon', 'font-size:40px;');">shadow link</a><div style="position: relative; width: 50%;"><script><!--OutIt('outline text', 1, 'black', 'silver', 'font-size:40px;');//--></script></div><div style="position: relative; width: 50%; top: 50px;"><script><!--var message="outline text";var thickness=1;var color2="darkred";var color1="red";var extra="font-size:40px;";var x = -thickness;var y = -thickness;while (y<=thickness) {while (x<=thickness) {document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");x=x+1;}y=y+1;} document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");//--></script></div><div style="position: relative; width: 50%; top: 100px;"><script><!--var message="shadow text";var range=1;var extra="font-size:40px;";var color1="blue";var color2="navy";var x = range;var y = range;document.write ("<span style='"+extra+" color:"+color2+"; position:absolute\; left:"+x+"; top:"+y+";'>"+message+"</span>");document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");//--></script></div><div style="position: relative; width: 50%; top: 150px;"><script><!--ShadeIt('shadow text', 3, 'orange', 'maroon', 'font-size:40px;');//--></script></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->