No sé si valía la pena volver por esto, pero no quiero que el día de mañana alguien me reclame por 'insistir en que lean los mensajes antes de responder', diciendo que yo mismo no lo hago.
En realidad sí vi que
AlvaroX había
descubierto justamente ese detalle que mencioné en el post anterior : con 4 —o más— capas se hace un borde mejor que con 2, pero como perdí el código, ya no lo puse; no me pareció que tomarme el trabajo de hacerlo de nuevo valiese la pena.
A él sí le correspondía hacer algún comentario al respecto. Bueno, en verdad no era su obligación, pero cuando escribí el mensaje lo mismo metí alguna alusión, y después me arrepentí y la borré. El asunto no es serio, ni grave, ni importante. Y yo quedaba como el mismo viejo amargo, resentido y malaonda de siempre. Tampoco valía la pena.
Como dije al principio, encima dudo si la vale este descargo, por eso aprovecho la visita para mejorar el ejemplo anterior, que no era muy eficiente y se parecía al de
Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() ) #10
que como verán nunca optimicé.
Ahora por el mismo precio, entrego un segundo ejemplo —muy raro— que solamente funciona en la familia
Mozilla
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CARACTERES CON BORDE DE CARACTERES.</title>
<script type="text/javascript">
function letras(){
var caras = "";
var texto = "F d W"
var alfa = document.getElementById("bordeado");
while (caras.length < 180){
caras = caras + "☻";
}
var ancho = alfa.width;
var alto = alfa.height;
var efecto = alfa.getContext('2d');
efecto.fillStyle = '#000000';
efecto.fillRect(0, 0, ancho, alto);
efecto.save();
efecto.translate(10, alto*0.9);
efecto.mozTextStyle = '900 270px arial, helvetica, sans-serif';
efecto.mozPathText(texto);
efecto.fillStyle = '#999999';
efecto.fill();
efecto.fillStyle = '#ffff00';
efecto.mozTextStyle = '24px "arial unicode ms", "lucida sans unicode", "ms mincho", sans-serif';
efecto.mozTextAlongPath(caras, false);
efecto.restore();
}
onload = letras;
</script>
<style>
body {background: #666666; text-align: center; }
h2 {text-align: left; }
</style>
</head><body>
<h2>Borde con texto. (Para Mozilla)</h2>
<canvas id="bordeado" width="760" height="250"></canvas>
</body></html>
Crea un borde hecho con caracteres, y convierte todo a imagen (si le hacen un click con el botón secundario del ratón la pueden copiar o guardar).
Sé que no elegí el mejor caracter. Como el
canvas lo rota para seguir el contorno de las letras, a veces la carita se ve deformada por el desplazamiento de pixeles, y termina guiñando un ojo o haciendo una mueca de fastidio. Insisto en que el efecto es una curiosidad, no creo que ningún diseñador lo use para nada. pero si le encuentran utilidad, me avisan.