Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 JessiKa

avatar
Membro

Menu Horizontal Lets


Eu sei que este código é muito simples, e ja tem um bem semelhante aqui no fórum, mas vale o tutorial xD
PunBB  PhpBB2  PhpBB3  Invision  Blog  Site
--> Código CSS <--

Código:
/*Menu Horizontal Lets*/
#menulets li a {
  -webkit-transition-duration: 0.20s;
 -webkit-transition-timing-function: ease-out;
 -moz-transition-duration: 0.20s;
 -moz-transition-timing-function: ease-out;
}
#menulets li {
 display: inline;
 list-style: none;
}
#menulets li a {
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
 -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
 box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
 -webkit-transition-duration: 0.20s;
 -webkit-transition-timing-function: ease-out;
 -moz-transition-duration: 0.20s;
 -moz-transition-timing-function: ease-out;
 color: #0f0f0f; /*COR DA LETRA*/
 background-color: #ffbc09; /*COR DO FUNDO*/
 display: inline-block;
 padding: 5px 15px;
 outline: none;
 text-decoration: none;
}
#menulets li a:hover {
 background-color: #f4b409;
 padding: 5px 25px;
}
#menulets li a:active {
 background: rgba(0,0,0,0.1);
 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
 box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
--> Código dos botões <--
Código:
<ul id="menulets"> <li><a href="#">home</a></li> <li><a href="#">edit</a></li> <li><a href="#">edit</a></li> <li><a href="#">edit</a></li> <li><a href="#">edit</a></li> <li><a href="#">edit</a></li> </ul>

Demonstração



Desenvolvido por JessiKa | SGBR™
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 LevelUp

avatar
Membro
Obrigado por compartilhar!
Ver perfil do usuário