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