Ah! Ya lo entendí.
Después de mandar el mensaje vi dónde estaba el problema.
Preparé otra versión con la sombra inclinada que no necesita ajustar a mano el margen. Quizá a alguien le sirva como inspiración para simular un
wave y hacer el efecto de "reflejo en agua".
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>SOMBREADO.</title>
<script type="text/javascript">
function color(n) {
return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
}
function voltear1(){
var contRefl = prueba = "";
var objOrig = document.getElementById( "enves" );
var alto = parseInt(objOrig.offsetHeight);
var contOrig = objOrig.innerHTML;
var capas = alto;
objOrig.style.marginBottom = (alto/2.5)*-1 +"px";
for(c=0, col=0; c<capas/2; c++, col+=255/(capas/2) ){
var colHex="#"+color(col)+color(col)+color(col);
contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c-alto)+"px; margin-left:"+(c*2-alto/2.5)+"px; color: "+colHex+";'>"+ contOrig +"</div></div>";
}
document.getElementById("reves").style.height = alto +"px";
document.getElementById("reves").innerHTML = contRefl;
}
onload = voltear1;
onresize = voltear1;
</script>
<style type="text/css">
#enves , #reves {
position:relative;
font-weight:900;
font-size:70px;
font-family:"arial black";
color:#000000;
}
#reves div {
overflow:hidden;
}
</style>
</head>
<body>
<h2>Efecto sombra de texto inclinada. (IE, FF)</h2>
<div id="enves"> Sombreado </div>
<div id="reves"></div>
</body>
</html>
También se podrían meter los caracteres en
span y con
letter-spacing simular una inclinación en "y".
Lo de
Caricatos, bue ... todos le robamos ideas. Es un experto en el tema gradientes.