Annyz-BlOg : Texto 3D Hover Colorido [Colorfull]
para COPIAR los codigos usa la tecla Ctrl + C y para PEGAR usa la tecla Ctrl + V gracias :) El Blog Se visualiza mejor con Google Chrome..

07 noviembre 2012

Texto 3D Hover Colorido [Colorfull]



Hi ^^ buen dia chicas hoy hare un tuto  muy lindo y llamativo n.n se trata de hacer que un texto cambie a color al pasar el cursor sobre el, (se mantendra en gris hasta que el cursor pase sobre el y cambie a color) como se ve aqui en el ejemplo:




Para hacer este truquito sigue los siguientes pasos:

Anda a Plantilla Edicion de Html Continuar

Copia este codigo y pegalo antes de ]]></b:skin>

/* Colored text */
#coloredtext  {
  width:300px;
  font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
  background:;
  padding:40px;
}
/* Colored text links */
#coloredtext a {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 0.9em;
  margin-bottom: 10px;
  display: block;
  position: relative;
  color: #E58;
  text-decoration: none
}
#coloredtext a, #animationWrapper span {
  -webkit-transition: all 0.12s ease-out;
  -moz-transition: all 0.12s ease-out;
  -o-transition: all 0.12s ease-out;
  -ms-transition: all 0.12s ease-out;
  transition: all 0.12s ease-out;
}
#coloredtext span {
  display: block;
  color: #555;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}
#coloredtext .span1 {
  font-size: 20px;
  line-height: 0.8em;
}
#coloredtext a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}
#coloredtext a:hover span {
  color:#fff;
}
/* mude a cor da sombra aqui */
#coloredtext a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}
#coloredtext a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}
#coloredtext a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}
#coloredtext a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}


Luego das guardar.

Rosa:  Es para cambiar el tamaño de los textos

Ahora copia este codigo y pegalo en un gadget html/javascript o si decides ponerlo en una entrada pega el codigo en la pestaña HTML Y estando en esa pestaña das publicar.


<div id="coloredtext">
  <a href="/">
    <span class="span1">PRIMERA TEXTO</span><span class="span2">SEGUNDO TEXTO</span><span class="span3">TERCER TEXTO</span><span class="span4">CUARTO TEXTO</span>
  </a>
</div>

Imagen guia


Espero les agrade mucho el efecto ^^ saludos a todas y un beso :)


19 comentarios:

  1. Genial *_* Me ha encantado :3 <3
    aproposito gracias por pasarte por mi blog
    QUE BONITA PERSONA SE VE QUE ERES ^^
    ojala no cambies eso :D Besitos babaii!

    ResponderEliminar
  2. ¿Como haces para decorar los comentarios?

    ResponderEliminar
  3. tienes bastantes premios en miblog:http://nemutteirupanda.blogspot.com.ar/ solo debes buscarlos xD -.-''

    ResponderEliminar
  4. Me encanto ese pastel, pasteloso? rainbow! me encanta lo usare!! arigato. tu blog es hermoso es asombroso!!! muchisimas gracias!

    ResponderEliminar
  5. Que bonito efecto me encanta.! Y el pastel que rico yo quiero :D...muy bonito te quedo el cambio de look Annyz.!

    ResponderEliminar
  6. Me gusta mas como esta ahora el blog que antes ^^
    annyz, ¿podrias hacer un tuto de como cambias el diseño de los comments?
    besoss

    ResponderEliminar
  7. bien! annyz has vuelto! :D
    porcierto me podrias decir un tutorial?
    es que querria saber como se le pone esos bordecitos a los titulos de los gadgets...
    gracias

    ResponderEliminar
  8. aaaaw me gusto el tuto pero lo q mas me encanto fue ese pasteeel se ve deliciosoooo me antojeeee ♥♥♥
    por cierto nenis podrias hacer un tutoo o nose si es por la plantilla de tu blog, pero la caja de comentarios esta genial, se encierra cada comentario en cuadrito y al lado la foto me fascina gracias besitos te adoro

    ResponderEliminar
  9. Me gustaria hacerlo,pero cuando intento copiarlo,no me sale nada:s
    Besitos de miel^^y gracias
    Alicia

    ResponderEliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. haha oKa.. recuerda que tienes que presionar la tecla ctrl+C para copiar :P

      Eliminar
    2. Ah,gracias^^,por cierto,tu blog se ha quedado genial:p

      Eliminar
  11. veo que as cambiado el blog, esta mucho mas bonito¡¡ enorabuena, pasate patriusibu.blogpot.com.es

    ResponderEliminar
  12. Ke lindo el truco y el pastel mmm tengo hambre :-P

    ResponderEliminar