28/7/13

[Tutorial]Menu Piano Hover


Holaaa el primer tutorial tras mi ausencia por vacaciones siii me tome unas vacaciones en un hotel bueno ya esta acabando el mes y pronto estare haciendo el video.Un noticion voy a ir al Japan Weeken de madrid !!!! de septiembre si alguien sabe que dia es  me vendría muy bien y bueno aqui os dejo el tuto de este menu
  • Edicion HTLM
  • Buscas : ]]></b:skin> y antes de eso pega

/* Menu Electric by Annyz Blog */
.electric {
background:#EDC1FF;
padding:4px;border-top:1px solid:#FFABD7;
border-bottom:1px solid #eee;
margin-bottom:0px;
text-shadow:1px 1px 1px #FFABD7;
font:11px verdana;color:#FF0D7A;
-webkit-transition:all .50s linear;
-moz-transition:all .2s linear;
transition:all .90s linear;
-moz-border-radius: 35px;
border-radius: 35px;
}
.electric:hover {
background:#FFF9AF;
padding:4px;border-top:1px;
padding-left:40px;
text-shadow:100px 1px 1px #FF0D7A;
font:11px verdana;color:#26B0FF;
filter: hue-rotate(190deg); -webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
    -o-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
-webkit-transition-duration: 0.20s;-webkit-border-radius: 3px;
-moz-border-radius: 35px;
border-radius: 35px;
Edito
Todo lo que lleve este símbolo # es el código de color que se puede cambiar 

  • Diseño
  • Añadir gadget jabascrip y pegar en la cajita este código

<div class="electric"><a href="LINK DE TU ENLACE">Categoria</a></div>
<div class="electric"><a href="LINK DE TU ENLACE">Categoria</a></div>
<div class="electric"><a href="LINK DE TU ENLACE">Categoria</a></div>
<div class="electric"><a href="LINK DE TU ENLACE">Categoria</a></div>  
{X}
Espero que os haya gustado el tutorial y la proxima entrada sera de recursos esperarla con ansias x3

14 comentarios:

  1. Hahahaha gracias por el tutorial! buen aporte! <3
    Y espero que te la pases genial en ese hotel XD
    hahah pues yo me la pasaría genial :D besos <3

    ResponderEliminar
  2. Waa japan week *O* Me encantó el menu :D !!

    ResponderEliminar
  3. jeje gracias por el menu kumy..te dejo besos!
    saludos

    ResponderEliminar
  4. creo... creo.... que buscaba algo así para un menú e.e.... tendré que probarlo a ver qué tal~ gracias onee-chan!!

    ResponderEliminar
  5. Lindo tuto me gusta como se ve el menú a ver si lo uso mas adelante, saludos nena

    ResponderEliminar
  6. es tan kawaii!! veremos si le doy utilidad >//<

    ResponderEliminar
  7. Vaya, qué buen tuto!! Gracias Kumy ^^
    Por cierto, ¿dices que vas al Japan Weeken en Septiembre? Creo que son los días 21 y 22. Espero que lo disfrutes :)
    Besitos :)

    ResponderEliminar
  8. este menu me encanta lo tuve una vez cuando hice un diseño pasado, ahora que Annyz nos dejo es muy bueno que pongas sus tutoriales aca ya que sin ti muchos no hariamos nada de nuestros blogs!

    ResponderEliminar
  9. Muy buen tuto *O*

    Muchos besos y se me cuida!!

    ResponderEliminar
  10. ¡Muchiiisimas graciias! n.n Buen tuto! Si llego a usarlo te daré créditos ~ ^^
    Saludos .3.

    ResponderEliminar
  11. El Japan Weekend de Madrid es el 21 y 22 de Septiembre n_n
    Ojalá yo pudiese ir!!!!! T envidio xD

    ResponderEliminar
  12. que plantilla usas en tu blog asi me deja porq cuando busco no me aparece!! u//////u

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com