Qué bueno que te haya gustado. Y sí, uno de los principales problemas es la cantidad de capas. Por eso no lo publiqué en CSS, sería mucho código para escribir.
Me la tomé con los filtros porque me parece una buena forma de hacer que -si algunos efectos se ven en
Mozilla y quizá en algún otro- los usuarios que vienen de
IE no van a tener el clásico argumento de "tal cosa no se ve".
Probé el que pusiste y me tira un error, pero después desaparece y el texto no cambia. Claro que lo estoy probando en un
IE6 y en realidad estos inventos son para más
FF.
De todas formas, entiendo que hay un coloreado de texto en cada capa. Y me acordé que hace algún tiempo escribí algo así y no recuerdo si lo puse en el foro.
Si está repetido me avisan.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>COLOREA FUENTE.</title>
<style>
body{background-color:#000000; }
h2{color:#ffffff}
#contieneTexto{position:relative; font:bold 80px 'sans-serif'; color:#ff0000; }
.capas{position:absolute; overflow:hidden;}
</style>
<script language= "JavaScript">
var texto = "DEGRADADO";
var color = 0;
var textoAlto , grado;
var cadaCapa = "";
function inicia(){
document.getElementById('contieneTexto').innerHTML = texto;
textoAlto = document.getElementById('contieneTexto').offsetHeight;
grado = Math.floor(255/(textoAlto*0.5));
if(textoAlto > 4){
for(c=0; c<textoAlto; c++){
cadaCapa += '<span class="capas" style="height:'+textoAlto+'px; color:rgb(255, '+color+', 0); text-align:center">'+texto+'</span>\r\n';
textoAlto -= 2;
color += grado;
}
document.getElementById('contieneTexto').innerHTML = cadaCapa;
}
}
</script>
</head>
<body onload="inicia()">
<h2>Efecto para colorear un texto con degradado vertical. IE / FF.</h2>
<div id="contieneTexto" unselectable="on"></div>
</body>
</html>
No sé qué pasa con el
overflow. Creo que no es necesario, me quedó de las pruebas y como soy desprolijo no lo borré.
Te dejo otro. Pero si no tienes una máquina rápida ¡ junta paciencia para verlo !
Rotar Texto
Lo del reflejo de imagen se puede, pero no en
IE, allí hay que poner un
hack o una discriminación en el escript para aplicarle filtros. El problema es que el navegador de
MS extremó sus medidas de seguridad y revisa cada imagen que carga aunque tengan la misma dirección. Y si haces un voltéo horizontal de una imagen de 200px de ancho ... va a cargar la imagen 200 veces para revisarlas una por una.
Pero como falta justo ese ejemplo, te agradezco si pones lo que vayas experimentando.
saludos
furoya