FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Blockquote en movimiento

22 nov 2012
Holaa chiics como es prometi, les dejare el tutorial sobre como hacer este efecto , miren este blog : Daily Visuals ♥ (xd por sierto visitenlo es mio) y miren el efecto que tiene en las imagenes y en el blockquote (se mueve por detras) bueno se los enseñare para colocarlo en layout personalizado , es facil con un codigo especial ;)


Bueno, empezamos. Buscan esta parte de su code:
/* Imágenes
----------------------------------------------- */
a img {
background-image: url(http://i46.tinypic.com/9u2elg.png);
padding: 5px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #ffffff;
opacity:.72;
filter: alpha(opacity=72);
}
a:hover img {
background: url(http://i45.tinypic.com/zmxpqs.png);
padding: 7px;
box-shadow: #FFFFFF 0px 0px 8px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
opacity:.99;
filter: alpha(opacity=99);
border: 1px solid #ffffff;


}

donde dice "a:hover img{"  abajo de todo lo que tiene pegan el siguiente codigo

-webkit-transition: background-position 2s;

-moz-transition: background-position 2s;

-o-transition: background-position 2s;

-ms-transition: background-position 2s;

transition: background-position 2s;

background-position: center;y ustedes ahi le cambian si quieren que el movimiento dure mas segundos...etc...

entonces quedara asi


/* Imágenes
----------------------------------------------- */
a img {
background-image: url(http://i46.tinypic.com/9u2elg.png);
padding: 5px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #ffffff;
opacity:.72;
filter: alpha(opacity=72);
}
a:hover img {
background: url(http://i45.tinypic.com/zmxpqs.png);
padding: 7px;
box-shadow: #FFFFFF 0px 0px 8px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
opacity:.99;
filter: alpha(opacity=99);
border: 1px solid #ffffff;

-webkit-transition: background-position 2s;
-moz-transition: background-position 2s;
-o-transition: background-position 2s;
-ms-transition: background-position 2s;
transition: background-position 2s;
background-position: center;
}


Espero que les halla gustaadoo :* ♥ Muchoos besos ! espero que lo coloqeen ;)


8 comentarios :

  1. Valee amor como se hace para poner en mi blog mi boton de creditos¿?

    ResponderEliminar
  2. Respuestas
    1. o si no ponme de admin en el blog y yo te hago todas las configuraciones y si no lo deseas asi ps lo unico que te puede ayudar es buscar tutoriales ;) asi aprendii yo xd el unico sidebar que no podras llenar de widgets es seguidores porque como es layout personalizado es dificil encontrar el mismo widget en html :s de resto los otros si se pueden !

      Eliminar
    2. Valeee :) me harías un gran favor con eso

      Eliminar
  3. Hola!!!
    Me gustaria afiliarte para salir en tu elite y yo en la tuya mi blog s este:
    http://loveditions.blogspot.com.es/

    Contestame por un coment en mi blog!

    ResponderEliminar
  4. Holi :3 Tengo un problema, no me encuentra el código...¿Lo busco en edición HTML? Gracias ^^

    ResponderEliminar
    Respuestas
    1. Sí, en edición HTML, dónde más? xD Tienes que buscar esto: a img {, lo de a:hover img{ no creo que este, agregalo (:

      Eliminar
  5. No me funciona, porque en mi código no me encuentra nada... :S

    ResponderEliminar