131 lines
2.5 KiB
HTML
131 lines
2.5 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<title>Xtext</title>
|
||
|
|
<style type='text/css'>
|
||
|
|
* {
|
||
|
|
font:25px 'trebuchet ms';
|
||
|
|
position:relative;
|
||
|
|
color:#99ff00;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadow div {
|
||
|
|
position:relative;
|
||
|
|
color:#99ff00;
|
||
|
|
z-index:2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadow div.e {
|
||
|
|
position:absolute;
|
||
|
|
top:1px;
|
||
|
|
left:1px;
|
||
|
|
color:#000;
|
||
|
|
z-index:1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outline div {
|
||
|
|
float:left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outline div div {
|
||
|
|
color:#99ff00;
|
||
|
|
z-index:2;
|
||
|
|
font-size:70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outline div div.e {
|
||
|
|
color:#000;
|
||
|
|
font-size:80px;
|
||
|
|
position:absolute;
|
||
|
|
top:-5px;
|
||
|
|
left:-3px;
|
||
|
|
z-index:1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type='text/javascript'>
|
||
|
|
window.onload=function() {
|
||
|
|
d=document.body
|
||
|
|
for (i=0;i<d.childNodes.length;i++) {
|
||
|
|
node=d.childNodes[i]
|
||
|
|
if (node.className) {
|
||
|
|
nspl=node.className.split(" ")
|
||
|
|
|
||
|
|
if (nspl[0]=="shadow") {
|
||
|
|
tl=nspl[1]
|
||
|
|
if (!tl) tl=""
|
||
|
|
tls=tl.split(",")
|
||
|
|
top=tls[0]
|
||
|
|
left=tls[1]
|
||
|
|
size=tls[2]
|
||
|
|
fcolor=tls[3]
|
||
|
|
scolor=tls[4]
|
||
|
|
|
||
|
|
if (!top && (left || size || fcolor || scolor))
|
||
|
|
top="_"
|
||
|
|
|
||
|
|
if (top && top!="_")
|
||
|
|
stya="top: "+top+"px"
|
||
|
|
else
|
||
|
|
stya=""
|
||
|
|
|
||
|
|
if (left)
|
||
|
|
stya+="; left:"+left+"px"
|
||
|
|
|
||
|
|
if (size) {
|
||
|
|
stya+="; font-size: "+size+"px"
|
||
|
|
styb=" style='font-size: "+size+"px"
|
||
|
|
}
|
||
|
|
else
|
||
|
|
styb=""
|
||
|
|
|
||
|
|
if (fcolor)
|
||
|
|
styb+="; color: "+fcolor
|
||
|
|
|
||
|
|
if (scolor)
|
||
|
|
stya+="; color: "+scolor
|
||
|
|
|
||
|
|
if (top*1<0)
|
||
|
|
node.style.marginTop=top.substr(1)+"px"
|
||
|
|
|
||
|
|
if (left*1<0)
|
||
|
|
node.style.marginLeft=left.substr(1)+"px"
|
||
|
|
|
||
|
|
if (stya!="") {
|
||
|
|
if (top!="_")
|
||
|
|
stya=" style='"+stya+"'"
|
||
|
|
else
|
||
|
|
stya=" style='"+stya.substr(2)+"'"
|
||
|
|
}
|
||
|
|
if (styb!="")
|
||
|
|
styb+="'"
|
||
|
|
|
||
|
|
node.innerHTML="<div class='e'"+stya+">"+node.innerHTML+"</div>"+"<div"+styb+">"+node.innerHTML+"</div>"
|
||
|
|
}
|
||
|
|
else if (nspl[0]=="outline") {
|
||
|
|
fres=""
|
||
|
|
ni=node.innerHTML
|
||
|
|
nl=ni.length
|
||
|
|
for (ib=0; ib<nl; ib+=1) {
|
||
|
|
ns=ni.substr(ib,1)
|
||
|
|
ns=ns.replace(" "," ")
|
||
|
|
fres+="<div><div>"+ns+"</div><div class='e'>"+ns+"</div></div>"
|
||
|
|
}
|
||
|
|
node.innerHTML=fres
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class='shadow -1,0,18'>This is a test.</div>
|
||
|
|
<div class='shadow'>This is a test.</div>
|
||
|
|
<div class='shadow 2,2,50'>This is a test.</div>
|
||
|
|
<div class='shadow 3,3,75'>This is a test.</div>
|
||
|
|
<div class='shadow 1,3,80,#8e00f8,#ab9605'>This is a test.</div>
|
||
|
|
<div class='shadow 4,4,100'>This is a test.</div>
|
||
|
|
<div class='shadow -4,-4,110,#000,#ccc'>This is a test.</div>
|
||
|
|
<div class='shadow 5,-3,120,#f0d208,#0019f0'>This is a test.</div>
|
||
|
|
<div class='outline'>This is a test.</div>
|
||
|
|
</body>
|
||
|
|
</html>
|