mmm diciamo che la differenza mi è un po' ignota
cmq ti posto un esempio fatto (come puoi vedere) in meno di 2 minuti
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#apDiv1 {
position:absolute;
left:344px;
top:73px;
width:140px;
height:27px;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
#apDiv2 {
position:absolute;
left:341px;
top:12px;
width:170px;
height:64px;
z-index:2;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
color:#F00;
}
</style>
</head>
<script type="text/javascript">
function scrivi(val){
document.getElementById('apDiv'+val).innerHTML = document.getElementById('textfield'+val).value;
}
</script>
<body>
<div id="apDiv2"></div>
<div id="apDiv1"></div>
<input type="text" name="textfield2" id="textfield2" onchange="scrivi(2)" value="" />
<input type="text" name="textfield1" id="textfield1" onchange="scrivi(1)" value="" />
</body>
</html>
è ovvio che per averlo più completo (identico a quello che hai linkato) ti ci voglia un qualche linguaggio per il salvataggio, ma tutto il resto:
stile carattere
sfondo
testo da inserire
fronte e retro
ecc.
è fattibile con js e css...sitratta solo di andare a modificare dei valori dello stile