Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Efecto Bungee {My Favorite Blogs}


I'm so sorry Really! Lo siento muchoooooooooooo Siento mucho no haber publicado nada ayer. Antes de presentar este nuevo tutorial, les contaré mi mágica historia -Kuma tirando polvos de color- wiiiiiiiii

*Nota: si gustas sáltate esta introducción loca(?)
Pasa que ayer tuve que buscar información sobre danzas folklóricas del Cusco {un departamento de Perú}. Y sinceramente no me emociona nada . No me emociona la historia ni la geografía. Si así fuera hubiera estudiado para turismo . Y aunque la información que tuve que buscar y traducir no es mucha... {ay sí, olvidé decir esta info que estuve buscando es para una feria cultural in english, este sábado expondré ante turistas 0_0 AAAAH!} ...asdfasdfasf  ¿en qué estaba? ...AH sí ...La información no fue difícil de encontrar, pero tuve una pequeña distracción  -kokoro de Kuma haciendo doki doki- AWWWWWWWWWW! Perdí la noción del tiempo me distraje mucho con esa personita {esta historia la cuento en otro de mis motivos de ausencia del blog }. Llegó la hora del almuerzo, vi tv hasta tarde {vi el Diario de Bridget Jones ...ay como me mata de risa esa película}. Y recién a eso de las 7 pm me senté a hacer el trabajo para la feria cultura y volví a distraerme . En fin ya terminé ese trabajo para la feria . FIN.

EFECTO BUNGEE

Este lindo tutorial llega gracias aaaaaaaaaa.... a que estoy happy  ¿Se me nota mucho verdad? no puedo evitarlo. Bueno va... este lindo efecto bungee hace que las imágenes se agiten y reboten, de la misma forma como cuando se salta bungee.

Captura:

Códigos:

1RO: Pega {en Plantilla} el sgte. código antes de ]]></b:skin> y guarda.
/*Efecto Bungee
----------------------------------------------- */
@-webkit-keyframes shaik {
10% {-webkit-transform: translatey(-5px);}
100% {-webkit-transform: translatey(-10px);}
100% {-webkit-transform: scale(1.1);}
0% {-webkit-transform: rotate(-5deg); }
25% {-webkit-transform: rotate(40deg); }
100% {-webkit-transform: rotate(-40deg); }
}
@-moz-keyframes shaik {
10% {-webkit-transform: translatey(-5px);}
100% {-webkit-transform: translatey(-10px);}
100% {-webkit-transform: scale(1.1);}
0% {-webkit-transform: rotate(-5deg); }
25% {-webkit-transform: rotate(40deg); }
100% {-webkit-transform: rotate(-40deg); }
}
@-o-keyframes shaik {
10% {-webkit-transform: translatey(-5px);}
100% {-webkit-transform: translatey(-10px);}
100% {-webkit-transform: scale(1.1);}
0% {-webkit-transform: rotate(-5deg); }
25% {-webkit-transform: rotate(40deg); }
100% {-webkit-transform: rotate(-40deg); }
}
.bungeegallery img {-webkit-transition: .7s; box-shadow: 1px 1px #d6d6d6;box-shadow: inset 0 0 18px #ffe4e1, 0 0 3px #FFD1CC;border-radius: 14px;}
.bungeegallery img:hover {-webkit-animation: shaik .7s alternate infinite linear;
box-shadow: inset 0 0 18px #ffe4e1, 0 0 3px #FFD1CC;border-radius: 35px;}

2DO: Pega este último código en un gadget de HTML/JavaScript {en Diseño}.
<div class="bungeegallery" style="text-align: center;">
<a target="_blank" href="URL"><img src='http://img841.imageshack.us/img841/5710/c12a.jpg'  width='50' style="border-top: #37dabe solid 5px;border-bottom: #ff52ff solid 5px;border-right: #ff52ff solid 5px;border-left: #37dabe solid 5px;"/></a>
<a target="_blank" href="URL"><img src='http://img841.imageshack.us/img841/5710/c12a.jpg'  width='50' style="border-top: #37dabe solid 5px;border-bottom: #ff52ff solid 5px;border-right: #ff52ff solid 5px;border-left: #37dabe solid 5px;"/></a>
<a target="_blank" href="URL"><img src='http://img841.imageshack.us/img841/5710/c12a.jpg'  width='50' style="border-top: #37dabe solid 5px;border-bottom: #ff52ff solid 5px;border-right: #ff52ff solid 5px;border-left: #37dabe solid 5px;"/></a>
<a target="_blank" href="URL"><img src='http://img841.imageshack.us/img841/5710/c12a.jpg'  width='50' style="border-top: #37dabe solid 5px;border-bottom: #ff52ff solid 5px;border-right: #ff52ff solid 5px;border-left: #37dabe solid 5px;"/></a>
</div>

Personaliza:
URL → Link del sitio web.
width='50' → Tamaño. Modifica a conveniencia {cambia el número 50 por otro}.
border-top → Borde superior.
border-bottom → Borde inferior.
border-right → Borde derecho.
border-left → Borde izquierdo.
*Modificar bordes: {ejemplo}
#37dabe → Color. Cambia por otro código de color.
solid → Tipo de borde. Escoge entre solid {linea continua}, dashed {guiones}, dotted {puntitos}
5px → Grosor de borde. Cambia el número por otro. A mayor el número, mayor es el grosor.
*Si quieres aumentar una opción más solo pega el sgte. código antes de </div>
<a target="_blank" href="URL"><img src='http://img841.imageshack.us/img841/5710/c12a.jpg'  width='50' style="border-top: #37dabe solid 5px;border-bottom: #ff52ff solid 5px;border-right: #ff52ff solid 5px;border-left: #37dabe solid 5px;"/></a>

Bueno fue todo. Madre mía me quedó largo el post Y eso que es una entrada programada. Sí lo es, sabía que hoy también me distraería así que programé la entrada . Más tarde paso a saludar y responder sus lindos mensajitos. Por ahora me retiro a dormir... bueno lo que sea que vaya a hacer después de que lean esto. Que confuso esto del tiempo y espacio publicando con entradas programadas . Bye Bye I love you very much. Bye!

18 comentarios:

  1. hahaha morí de risa con tu historia XDDD, gracias por el tutorial^^

    ResponderEliminar
  2. esta precioso el efecto XD porfin acabaste el trabajo XDDD

    ResponderEliminar
    Respuestas
    1. si lo acabe y no se si valio la pena XD

      Eliminar
  3. Que bonito efecto :) gracias por el tuto :)

    ResponderEliminar
  4. Esta muy bueno!! :DDD

    Muchos besos y se me cuida!!

    ResponderEliminar
  5. Hermoso tutorial*^* Y muy util ademas, a ver si me sale u.u Ah!! Ya puse tu botoncito de publi. Besitos!

    ResponderEliminar
  6. ooh esta hermoso!! *w* muy bueno el tuto y kawaii ademas

    ResponderEliminar
    Respuestas
    1. :3 si lo sé...q bueno que les gustara, gracias!

      Eliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.