miércoles, 17 de octubre de 2012

Efectos Rainbow En Textos

El primer efecto Rainbow n.n


Annyz Kawaii World

Este truco no funciona si tienes otro script activo (por ejemplo el de brillitos en el cursor) yo lo tuve que quitar para que funcionara el efecto rainbow.

Para ponerlo en tu blog anda a Plantilla >> Edicion HTML >> Continuar

Copia este codigo y pegalo justo antes de </header>
<script type="text/javascript">
// <![CDATA[
var speed=100; // speed colours change, 1 second = 1000
var glow=4; // can be set from '0' for no glow, to 10
var raincol=new Array("#ff0000", "#ff9900", "#ffff00", "#99ff00", "#00ff00", "#00ff99", "#00ffff", "#0099ff", "#0000ff", "#9900ff", "#ff00ff", "#ff0099"); // change the colours if you want to
var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link)
/****************************
*    Rainbow Text Effect    *
*(c)2003-12 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var rainbow, raintxt, raincnt=0;
window.onload=function() { if (document.getElementById) {
  var i, rainbeau;
  rainbow=document.getElementById("rainbow");
  raintxt=rainbow.firstChild.nodeValue;
  while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
  for (i=0; i<raintxt.length; i++) {
    rainbeau=document.createElement("span");
    rainbeau.setAttribute("id", "rain"+i);
    rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
    if (alink) {
      rainbeau.style.cursor="pointer";
      rainbeau.onclick=function() { top.location.href=alink; }
    }
    rainbow.appendChild(rainbeau);
  }
  rainbow=setInterval ("raining()", speed);
}}
function raining() {
  var i, c;
  for (i=0; i<raintxt.length; i++) {
    c=raincol[(i+raincnt)%raincol.length];
    document.getElementById("rain"+i).style.color=c;
if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
  }
  raincnt++;
}
// ]]>
</script>
Das guardar

Ahora ve a donde quieres poner el texto, yo por ejemplo la pondre aqui en la entrada  copia este codigo y pegalo en la pestaña HTML no en la de redactar oK?


estando en esa pestaña das publicar.. y listo


Segunda version Rainbow


Gracias por tu Visita No Olvides Comentar ^^

Para ponerlo en tu blog anda a Plantilla y antes de ]]></b:skin>

pega este codigo:


.rainbow {
  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
}

Das guardar....

y empieza a escribir en una entrada...TODO lo que escribas estara con el efecto rainbow.. si solo quieres  que solo sean algunos textos y no todo entonces como anteriormente hicimos..pega  este codigo en donde quieres el texto


<div class="rainbow">AQUI TU TEXTO</div> 

ejemplo
:
Mi texto dentro del codigo efecto rainbow
aqui ya escribo fuera del codigo ^^

imagen guia


Espero les haya gustado el tuto alguna duda?? dejame un comentario :)

17 comentarios:

  1. porque no ponéis un chat en el blog?
    seguro que atraeria a mucha gente, y podríamos hacernos amigos de distintas razas :)

    ResponderEliminar
  2. Hola!!

    He organizado un reto y me gustaría que participases. Aquí el enlace: http://anarodrimen.blogspot.com.es/2012/10/reto-this-is-my-movie.html

    ResponderEliminar
  3. es muy bonito n.n
    P.D.:Cuando me haga un botón de afiliación te podré afiliar?

    ResponderEliminar
  4. Hola! los invito a visitar mi blog:
    http://sonrieymira.blogspot.com.ar/
    (Afiliamos?)
    Porque les quiero decir que estan en la lista de "TOP 5 V-LOG" y queria que lo supieran. (: SALUDOS!

    ResponderEliminar
  5. genial te promocionare en mi blog: gronaliskawaistardoll.blogspot.com

    ResponderEliminar
  6. Bella tienes un premio en mi blog http://arainbowkiss.blogspot.com/2012/10/premio-hallowen.html

    ResponderEliminar
  7. Annyz (^O^)/ Te espera un premio en mi blog (>ω<)/

    ResponderEliminar
  8. naaaa no lo intentare!! es mucha tecnologia para mi :'(
    ok lo intentare pero no creo lograrlo

    ResponderEliminar
  9. ya me hice unos botoncitos, te puedo afiliar?

    ResponderEliminar
  10. Holaaa :D Te deje un premio Halloween para tu blog ^^ en mi blog: http://sakurakiminitodoke.blogspot.com.ar/

    Saludos ♥

    ResponderEliminar
  11. premio en mi blog:http://nemutteirupanda.blogspot.com.ar/

    ResponderEliminar
  12. hola soy candela me encanta tu lindo blog y mira una sorpresa
    tienes un premio en mi blog pasate ok
    http://clasicylove.blogspot.com.es/2012/10/premiofor-me.html?m=1

    ResponderEliminar
  13. holiii annyz te paso un tutorial mio, si quieres lo puedes usar :)

    http://tutosmeerideluxeworld.blogspot.com.ar/2012/10/como-poner-una-barra-de-estatus-en.html

    ResponderEliminar
  14. Que hermosos tutoriales tienes :) sigue así :3 adoro tu blog! se lo he recomendado a mis amigas también :) que tengas mucho existo! ;)

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.