Sombras en JS

En realidad, no es nada difícil: la pega es que, para elaborar una de estas formas, el método se hace un poco largo, pero... quien algo quiere, algo le cuesta :)

Aquí os dejo un ejemplo de texto "outline", otro de Sombra y otro que mezcla ambos:

PruebasPruebasPruebasPruebasPruebasPruebasPruebasPruebasPruebasPruebas

SombrasSombras

TodasTodasTodasTodasTodasTodasTodasTodasTodasTodasTodas

Podéis poner los códigos, todos juntitos (los del estilo que os interese, claro, NCLUYENDO LOS SCRIPTS, evidentemente), donde os parezca mejor: en una entrada, coomo aquí; como título de una sidebar, de una cabecera de blog, etc...

Y, hablando de códigos, aquí va:

<div style="position: relative; top: ; left: ;">

<script>

<!--





var message="Pruebas";

var thickness=1;

var color2="black";

var color1="white";

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><span style="font-size: 40px; color: black; position: absolute; left: -1px; top: 1px;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: -1px; top: 0pt;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: -1px; top: -1px;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: 0pt; top: 1px;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: 0pt; top: 0pt;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: 0pt; top: -1px;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: 1px; top: 1px;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: 1px; top: 0pt;">Pruebas</span><span style="font-size: 40px; color: black; position: absolute; left: 1px; top: -1px;">Pruebas</span><span style="font-size: 40px; color: white; position: absolute; left: 0pt; top: 0pt;">Pruebas</span>



</div>



<div style="position: relative; top: ; left: ;">

<script>

<!--

var message="Sombras";

var range=2;

var extra="font-size:40px;";

var color1="gray";

var color2="black";

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><span style="font-size: 40px; color: black; position: absolute; left: 2px; top: 2px;">Sombras</span><span style="font-size: 40px; color: gray; position: absolute; left: 0pt; top: 0pt;">Sombras</span>

</div>





<div style="position: relative; top: ; left: ;">

<script>

<!--





var message="Todas";

var thickness=1;

var color2="black";

var color1="white";

var color3="gray";

var extra="font-size:40px;";

var range=5;

var z = range;

var d = range;



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:"+color3+"; position:absolute\; left:"+z+"; top:"+d+";'>"+message+"</span>");

document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");









//-->

</script><span style="font-size: 40px; color: black; position: absolute; left: -1px; top: 1px;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: -1px; top: 0pt;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: -1px; top: -1px;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: 0pt; top: 1px;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: 0pt; top: 0pt;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: 0pt; top: -1px;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: 1px; top: 1px;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: 1px; top: 0pt;">Todas</span><span style="font-size: 40px; color: black; position: absolute; left: 1px; top: -1px;">Todas</span><span style="font-size: 40px; color: gray; position: absolute; left: 5px; top: 5px;">Todas</span><span style="font-size: 40px; color: white; position: absolute; left: 0pt; top: 0pt;">Todas</span>



</div>

Manejad a vuestro antojo los estilos y... suerte... :D
(Es cosa de stylizedweb )