Estas cosas las inventábamos porque el CSS no era tan compatible como ahora ... (je!).
El único navegador que ponía un borde de texto era
Internet Explorer. Pero ya hay una propuesta de CSS para estandarizar el efecto
Código:
<style type="text/css">
div { position: relative; height: 40px; }
.bordeTexto { position: absolute; font-size:40px;
font-weight:bold; -webkit-text-fill-color: black;
-webkit-text-stroke-color: red; -webkit-text-stroke-width: 2px;
filter:glow(color=red, strength=5);
}
</style>
<div><span class="bordeTexto">Foros del Web.</span></div>
<p><span style="text-shadow: 0 0 1ex red;
font: bold 40px arial, helvetica sans-serif;">
Foros del Web.
</p>
Como de momento no es totalmente compatible, el engendro que pusimos todavía vale
Es verdad eso de que, tal como está planteado, las 2 capas simulando un borde no se ven muy bien. Especialmente si queremos hacerlo "más grueso".
El problema está en que para usar CSS, 4 capas es demasiado. Con ese criterio podemos meter 40 capas, y seguro se va a ver mucho mejor. Entonces descubrimos que nos conviene hacerlo con JS; más que nada porque lo aprovechamos para animaciones de mayor o menor complejidad, según las ganas que tengamos de trabajar.
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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>DAME FUEGO.</title>
<script type="text/javascript">
var gruesoBorde = 4;
var bravo = gruesoBorde * 2;
var charly = (2*3.141592/360);
var contenido, anima, tiempo;
function arde() {
contenido = document.getElementById("texto").innerHTML;
for(n=0; n<360; n+=9){
var verde = (Math.floor(Math.random() * 240) + 16).toString(16);
x=Math.floor((bravo)*Math.cos(charly*n)) + bravo;
y=Math.floor((bravo)*Math.sin(charly*n));
document.getElementById("texto").innerHTML +=
'<div class="semitrans" style="color:#ff'+verde+'00; left:'
+(gruesoBorde+x)+'px; top:'+(gruesoBorde+y)+'px">'
+contenido+'</div>';
}
document.getElementById("texto").innerHTML +=
'<div onmouseover="arde2()" onmouseout="clearTimeout(tiempo)" '
+'onclick="alert(\'FUEGO\')" style="color:black; position:absolute; left:'
+(gruesoBorde * 2.5)+'px; top:'+(gruesoBorde * 1.8)+'px">'
+contenido+'</div>';
}
function arde2(){
var fuego = document.getElementById("texto");
for (f=0; f<40; f++){
var verde = (Math.floor(Math.random() * 240) + 16).toString(16);
fuego.getElementsByTagName("div")[f].style.color = "#ff" +verde+ "00";
}
tiempo = setTimeout("arde2()", 200)
}
onload = arde;
</script>
<style type="text/css">
body {background: silver; }
#texto { font: 900 30px arial, helvetica, sans-serif;
color: black; position:relative; background-color: black;
height: 1.5em; cursor: pointer; width: 9em; }
.semitrans {position:absolute; filter: alpha(opacity=35);
opacity: .35;}
</style>
</head>
<body>
<h2>Texto ardiendo.</h2>
<div id="texto">
FOROS del WEB</div>
Puntero en el texto para animar.
</body>
</html>
Para ampliar detalles deberíamos ir al Foro de Javascript, aunque a mí no me parece mal que hayas resucitado este viejo tema. Si hubieses puesto una güevada, un código "brillante" que no funciona, o repetido lo que ya se dijo y/o se superó, entonces
habría que banearte.
Pero es cierto. Taan, taan bien no se veía.
Efecto borroso nublado o desenfocado (sin filter:blur() )