Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

6/01/2013

Menu Unlike

Oi gente , lembram do Menu em Imagem Hover ? Então esse é a mesma coisa só foi acrescentado um linha de código que ao invés dele apenas descer para baixo, ele vira ao contrário {dai vem o nome do menu >.<}. Então vamos ao que interessa:

Bom vocês vão fazer tudo o que está no tutorial do Cherry Bomb só que no código css vocês colocam este :
.menu1{
background: transparent url('url da sua imagem') no-repeat bottom center;
width: largura px;
height: metade da alturapx;
margin-left: 0px;
transition-duration: 0.10s;
-webkit-transition-duration: 0.10s;
-moz-transition-duration: 0.10s;}
.menu1:hover {
background: transparent url('url da sua imagem') no-repeat top center;
width: largurapx;
height: metade da alturapx;
-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform: rotate(180deg);
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;} 

E edita com as medidas que estão em azul e pronto.

 Creditos : Cherry Bomb e Sugoi Tutoriais

Nenhum comentário:

Postar um comentário

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.