-->

05 junio 2014

Tutorial:Menú tipo cinta cómo el mío.

Bueno,últimamente he estado algo ausente XD,por falta de tiempo :(,pero ahora que tengo más tiempo voy a Activar más este blog.
Esta vez será de cómo poner el menú igualito que el mío,es muy sencillo y queda de lujo.
Da click en leer más y empecemos con el tutorial!


 Vamos a Diseño,Gadget ,HTML/JAVASCRIPT y pegas el siguiente código:
<center><style type="text/css">
.hTC {
padding: 3px 5px 7px 5px;
position:relative;
background: #6d6d6d; /* FONDO DEL MENU */
outline-offset: -3px;
outline: 1px dashed #aaa; /* COLOR DEL BORDE ENTRACORTADO */
}
.BASTILLE {
position: relative;
width: 620px; /* LARGO DEL MENU */
}
.BASTILLE:before {left: -20px;}
.BASTILLE:before {
border-color: #a8a8a8 transparent #ffb2cb transparent; /* COLOR DE LA CINTA DOBLE */
border-style: solid;
border-width: 14px;
content: "";
position: absolute;
right: -20px;
top: 0px;
}
a.linksTC {
color: #eee; /* COLOR DELOS LINKS */
text-decoration: none;
text-shadow: 0px 17px 0px transparent,
             0px -17px 0px transparent;
}
.linksTC {
margin: 3px;
font: 9px georgia; /* LETRA DE LOS LINKS */
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transition-duration: 0.5s;
}
.linksTC:hover {
color: transparent;
text-shadow: 0px -5px 0px #a8a8a8, /* COLOR1 DE LINKS HOVER */
             0px 5px 0px #ffb2cb; /* COLOR2 DE LINKS HOVER */
}
</style>
<div class="BASTILLE">
<div class="hTC">
<center>
<a href="URL" class="linksTC">NOMBRE</a>
<a href="URL" class="linksTC">NOMBRE</a>
<a href="URL" class="linksTC">NOMBRE</a>
<a href="URL" class="linksTC">NOMBRE</a>
<a href="URL" class="linksTC">NOMBRE</a>
<a href="URL" class="linksTC">NOMBRE</a>
<a href="URL" class="linksTC">NOMBRE</a>
</center>
</div>
</div>
</center>

EDITEMOS:

Todo lo que dice "*Color ":Reemplázalo por el color que desees.
URL:Cambia los 'URL' por la URL de la dirección de tu sección del blog.
NOMBRE:Cambia 'NOMBRE' por el nombre que quieras que tenga dicha sección.

SI NO DESEAS QUE ESTÉ EN EL CENTRO,QUITA LO QUE ESTÁ EN COLOR VERDE.
Bueno,también quería decir que ayer fuí a ver Maléfica,¡me encantó!,la recomiendo 100%,tiene de todo:Maravillosos Paisajes,Increíbles efectos especiales,Un cambio a la historia real impresionante...Teneis que verla.
Créditos por el tutorial:Mel

4 comentarios:

  1. Hola buen tuto!!..Una pregunta ¿podría poner un icono delante de la palabra? y si la respuesta es si ¿ como lo haría?-..pleasee help me

    ResponderEliminar
    Respuestas
    1. No creo...igual mezclando códigos se puede,lo intentaré y si me sale haré un tutorial de cómo poner iconos delante de las palabras del menu.

      Eliminar
    2. Bien!!! ..Gracias :)

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Hola :)
Antes que nada,quería deciros que no insulteis ni causeis spam,hay que ser respetuoso,amigos :)