Home About Affies Afiliame Tutorials
11.10.13

Tutorial: Menú love estilo cortina


Hola, hoy les traigo un tutorial menú Love estilo Cortina

1° Vamos a Diseño//Añadir Gadget// HTML/JavaScript

2° Pegamos el siguiente código:


P·R·E·V·I·E·W


<style>
.MENUlove { /* BORDE TOP */
background: #c7c7c7 url(http://static.tumblr.com/fb1f5d567bc2b6909701f2a6489dd461/dxb4osb/0ZEmgp6w5/tumblr_static_background.png);
font-family: century gothic;
font-size: 11px;
text-transform: uppercase;
padding: 10px;
position: fixed;
left: 0px;
height: px;
top: 0px;
width: 100%;
overflow: hidden;
text-align: center;
border-bottom: 1px dashed #fff;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.MENUlove:hover { /* BORDE TOP HOVER */
border-top: 0px solid #c7c7c7;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.MENUlove a { /* LINKS */
background: #;
border-radius: ;
color: #fff;
font-family: Trebuchet MS;
font-size: 8px;
letter-spacing: 3px;
border: 1px dashed #;
text-decoration: none;
padding: 8px 35px;
text-shadow: 0px -100px 1px #FFF;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.MENUlove a:hover { /* LINKS HOVER */
color: transparent;
font-style: bold;
font-family: century gothic;
text-shadow: 0px 0px 0px c7c7c7;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
</style>
<div class='MENUlove'>
<a href='Link'>título</a>
<a href='Link'>Título</a>
<a href='Link'>Título</a>
<a href='Link'>Título</a>

</div>
</style>




Créditos [X]
Actualizado el 27 de Febrero 2014

2 comentarios:

  1. Arigato por el tuto :3 Veo que vas poniendo cositas al blog ^^

    ResponderEliminar
  2. Muchas gracias por este tutorial, esta muy bonito <3

    ResponderEliminar

Escribe tu comentario pequeño friki :3
Recuerda que me haces muy feliz si no haces:
·Spam
·Insultos
·Anónimos ofensivos
·etc.
·Y por favor escribe algo que se pueda entender