lunes, 15 de octubre de 2012

Efectos En Los Links de tu Blog

hola blogueraas hoy es lunes no se ustedes pero waaaaaahh yo  lo odio xD, se me hace eterno y super pesado el dia  x___X quisiera que fuera viernes otra vez hahahahhaa, y bueno ya dejare de quejarme xD les pondre este tuto que al pasar el cursor sobre los links les da unos lindos efectos.

** y chicas sorry esta vez no puse demos para que vean los efectos.. solo imagenes.


para poner algun efecto en tu blog anda a:


Plantilla >> Edicion de html >> Continuar 


TODOS los efectos se ponen arriba de  ]]></b:skin>




-- Efecto Extrude --


Codigo:

a{
 position: relative;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; }
 a:hover{
left: -6px;
      top: -6px;
      color: #5ACEFF;
      text-shadow: 1px 1px #FF79C3, 2px 2px #FF79C3, 3px 3px #FF79C3, 4px 4px #FF79C3, 5px 5px #FF79C3, 6px 6px #FF79C3;

Para editarlo:

Azul: color del texto al cambiar.
rosa: color del efecto 3D (sombra)



El segundo efecto me lo presto Melo-Chan

--Efecto Multiple en Links--



Codigo:

a{
letter-spacing:2px;
-webkit-transition-duration: .50s;
text-shadow:1px #fff;
}
a:hover {
color:#000;
text-shadow: 2px 7px 1px #b8d935,
               -10px 1px 1px #fc5d77,
               4px -7px 1px #5dcdfc;
-webkit-transition-duration: .50s;
}

Para editar los colores:

text-shadow: 2px 7px 1px #b8d935, [COLOR SUPERIOR]
               -10px 1px 1px #fc5d77, [COLOR CENTRAL IZQUIERDA]
               4px -7px 1px #5dcdfc; [COLOR INFERIOR]




Efecto 3D Hover


Codigo:

a{
   color: white;
   text-shadow: 1px 1px #D0A9F5,                 2px 2px #D0A9F5,                 3px 3px #D0A9F5;   -webkit-transition: all 0.12s ease-out;
   -moz-transition:    all 0.12s ease-out;
   -ms-transition:     all 0.12s ease-out;
   -o-transition:      all 0.12s ease-out;
}
 a:hover{
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #F781F3,                 2px 2px #F781F3,                 3px 3px #F781F3,                 4px 4px #F781F3,                 5px 5px #F781F3,                 6px 6px #F781F3;}

Editar los colores:

Morado: Color 3D.
Rosa: Color 3D Hover.



Efecto Expando Ambos lados

aqui el efecto se divide en 2 con diferente color

Codigo:

a{
color:#fff;
text-left: 30px;
text-transform:lowercase;
letter-spacing: -1px;
}
 a:hover{
color:#000;
-webkit-transition: all 0.5s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;
text-shadow: 13px 0 .2px #57C8FF,
-13px 0 .2px #FF6EC8;
}

Morado: color texto izquierda
Rosa: Color texto derecha


Efecto Expando

Se separan las letras y cambia de color el texto


Codigo:

a{
 -webkit-transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}
 a:hover{
 color: #00adbc;
      letter-spacing: 0.25em;
}



Efecto GlOw


codigo:

a{
 -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}
 a:hover{
 color: #00adbc;
      text-shadow: 0px 0px 12px #00adbc;
}



Como editarlo:

rosa: color del texto hover
azul: color de la sombra hover.0

No copy Cat -- No copiar tutorial :)



4 comentarios:

  1. MUchas gracias por ponerlo.
    Yo,lo he intentado poner el primero en mi blog pero,no funciona.
    Pasate por http://unblogparagentecomotu.blogspot.com.es/

    ResponderEliminar
  2. he puesto el segundo a mi blog, me encanta! <3

    ResponderEliminar
  3. Como puedo poner el efecto multi color en imagenes asi como tienes tu en la cabecera??

    ResponderEliminar
  4. Gracias por compartir cosas tan lindas. Cada vez que vengo, me derrito ante tanta cosa bonita.
    Besitos.
    PS: agarré tu botoncito para afiliarte a mi blog http://elisitachou.blogspot.com

    ResponderEliminar

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