miércoles, octubre 01, 2014

Menu Minimalist


Preview de esta lindurita *w* xDD

Tutoriales Recursos Affies Creditos Home 

Para tenerlo...

Plantillas blogger: Pega el siguiente código justo arriba de ]]></b:skin>

Plantillas clásicas/blogskins: Pega el siguiente código justo arriba de </style>


.minimalist {
width: auto;
height: 15px;
background: #EAEAEA;padding-top: 5px;
padding-bottom: 5px;
color: #FFFFFF;margin-right: 1px;
padding-left: 5px;
padding-right: 5px;
text-shadow: 1px 1px 1px #CACACA;-ms-box-shadow:1px 1px 1px #ff00bf;-o-box-shadow:1px 1px 1px #ff00bf;-webkit-box-shadow:1px 1px 1px #ff00bf;-moz-box-shadow:1px 1px 1px #ff00bf;font-family: verdana;
font-size: 10px;
text-transform: uppercase
-webkit-filter: none;
-webkit-transition:all 1s ease
}
.minimalist:hover {
width: auto;
height: 15px;
background: #EAEAEA;padding-top: 5px;
padding-bottom: 5px;
border-left: 8px solid #ff00bf;color: #FFFFFF;margin-right: 1px;
padding-left: 10px;
padding-right: 5px;
text-shadow: 1px 1px 1px #CACACA;-ms-box-shadow:1px 1px 1px #ff00bf;-o-box-shadow:1px 1px 1px #ff00bf;-webkit-box-shadow:1px 1px 1px #ff00bf;-moz-box-shadow:1px 1px 1px #ff00bf;font-family: verdana;
font-size: 10px;
text-transform: uppercase
-webkit-filter: blur(3px);
-webkit-transition:all 1s ease;
}

Rojo: Color del fondo 
Naranja: Color del texto 
Amarillo: Sombra del texto 
Verde: Sombra del menú 
Celeste: Color del fondo hover 
Azul: Color del borde izquierdo hover 
Lila: Color del texto hover 
Fucsia: Color de la sombra del texto hover 
Marron: Color de la sombra del menú hover 

Terminas de modificar Guardas & 
pegas el siguiente código en un gadget html/javascript, o si tenes plantilla clasica/blogskin pegalo en alguna parte del codigo de alguna página de tu blog o del sidebar :3


<a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> 

Terminas de reemplazar lo indicado, guardas & listo!!! :D 

No hay comentarios:

Publicar un comentario