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]

Mi mundo de creacion

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 :)