Tutorial : Menu Flotante~


Hii mis pequeñas Guapuras♥ Hoy les traigo un peque tutorial : Un menu Flotante que de seguro os va a gustar ^^ ..  (esto lo habia hecho antes solo que se me borro mi entradiita tantas cosas que habia descubierto D: )..

Bueno Asi es como se veriia:

<--- Pero asi se veria personalizado Okaz?.. 

Bueno el codigo es este:

<style>.raejun{width:60px;padding:15px;margin-top:15px;box-shadow:2px 2px 4px #DFDFDF;background:#eee;font:8px tt; text-align:center;Text-decoration:none;color:#888;text-transform:uppercase;display:block;-webkit-transition:All 0.5s ease;-moz-transition:All 0.5s ease;-o-transition:All 0.5s ease;border-left:0px solid #000;-webkit-border-top-right-radius: 333px;-webkit-border-bottom-right-radius: 333px;-moz-border-radius-topright: 333px;-moz-border-radius-bottomright: 333px;border-top-right-radius: 333px;border-bottom-right-radius: 333px;}.raejun:hover{width:66px;border-left:10px solid #aaa;}@font-face {font-family:tt !important;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;}</style><div style="position:fixed; top:100px;left:0px;width:100px; color:#aaa;"><a class="raejun" href="LINK HERE">link 1</a><a class="raejun" href="LINK HERE">link 2</a><a class="raejun" href="LINK HERE">link 3</a><a class="raejun" href="LINK HERE">link 4</a></div>


Ahora remplazamos los colores ^^:

Celeste : Colocas la url de tu pagina que quieres que diriga ^^
Rojo : Hay pones el nombre de la categoria ^^..
Verde: Cambias el Color del fondo por ejemplo :
#F6CEEC <--- Rosiita claro ^^..
Pero bueno si quieres que en vez de color quieres que tenga un fondo es fácil !! .. 
Solo en vez de
 background:#eee;
Le pones  :

background-image:url(Aqui la url de tu Fondiis ^^);
Okey osea borras background:#eee; y pones background-image:url(aqui la url de tu fondiis ^^)

Asi se veria si le cambias por cualquier fondiito:

<---- Bueno le puse un fondo cualquiera ^^ vos podes escojer el fondiis que desees ^^.. !!

Bueno Sigamos :P ..

Azul : Aquí pones el color de la sombra =) !! 
Naranja : Aquí pones el color del texto de tu menú flotante ^^
Morado : Cambias el color de transición !! 
Rosa : El color que tiene a la izquierda al pasar el cursor :

<--- Ese color celestito ozcuro que aparece cuando pasas el cursor sobre el menu flotant ^^..

Amarillo : Eso no se lo probe pero no dio efecto el color :S (aver pruebenlo aver si funciona o_o)

Bueno espero que este menu les haiga gustado tanto como a mi =) !!..Bien quieren saber como funciona el menu? .. Pues visita mi bloguiis de Pruebas Antiguo : Clic aqui~..
Ahora bien les dejare la pagina de donde saco los colores okey?..


Listo espero que les haiga servido mucho este menu

PD: Si el code te pertenece avisame para poner los creditos 

Les mando muchoss besiitos♥

   


2 comentarios:

Yurika dijo...

esta muy chulo, gracias por el tutorial :DDD

Yane-chan ^ω^ dijo...

De nada Yurika ^^ espero que te haya gustado ♥

Besiitoss♥