4 de abr de 2013

Menu Destaque (Personalizado)

Boa noite bonitos! Primeiramente acho que eu deveria pedir mil perdões por passar esse tempão sem dar as caras por aqui. Bom minha semana foi super corrida quase todos os dias chegando depois das 00:00 , resumindo minha semana estava ótima até quarta-feira mais ou menos 23:20 por ai, mas já superei. Então hoje resolvi trazer um tutorial bem bacana, lembram do tutorial que eu postei do menu destaque, hoje vou ensinar a deixar ele mais ou menos igual o meu. Let's see?


Pra você realizar esse tutorial recomendo que você tenha pelo menos um pouco de conhecimento com o CSS, caso contrario nem tente.

Bom primeiro você crie duas imagens em algum programa de edição (PFS, PS, PS), só não vale o paint rsrs, as imagens deverão ficar mais ou menos assim.  Background / Botão (que gira)

Hospede as imagens...


Agora vamos a parte do Css

.destaque  {
float: left;
 margin-right: 2px;
 margin-left: -2px;
 margin-top: -2px;
background: url('AQUI_FICA_A_IMAGEM_DO_BOTÃO_QUE_GIRA');
 background-repeat: no-repeat!important;
width: 22px;
 height: 22px;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
-o-transition: all 1s ease;
 transition: all 1s ease;
}
.boxdestaque:hover .destaque {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
transition: all 1s ease;
}
.boxdestaque {
margin-left: -2px;
margin-right: -2px;overflow: hidden;
display: block;
height: 19px;
text-align: left;
-webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background: url('AQUI_FICA_A_IMAGEM_DO_BACKGROUND') no-repeat; padding: 4px;
 margin-bottom: 4px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.boxdestaque:hover {
background-position: -0px -30px;
text-shadow: 1px  1px 1px #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;}
.boxdestaque .title { /*AQUI FICA A PERSONALIZAÇÃO DO TEXTO QUE APARECERA NO MENU*/
color: #000;
font-size: 11px;
font-weight:none;
font-family: Georgia;
font-style: italic;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;}
.boxdestaque:hover .title{
color: #7797a7;
padding-left: 15px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;}
.boxdestaque .title:first-letter {color: #e34a80;}

Agora adicione um gadget JAVA, e cole o seguinte código.
<div class="boxdestaque">
<span class="title">Primeiro Link  "titulo"
<a class="destaque"Link aqui"></a>
</span>
</div>
<div class="boxdestaque">
<span class="title">Segundo Link "titulo"
<a class="destaque"Link aqui"></a>
</span>
</div><div class="boxdestaque">
<span class="title">Terceiro link  "titulo"
<a class="destaque" href="Link aqui"></a>
</span>
</div><div class="boxdestaque">
<span class="title">Quarto link  "titulo"
<a class="destaque" href="Link aqui"></a>
</span>
Bom gente espero que tenham conseguido, até a próxima. Peçam tutoriais la na ask (=
_Guuh 

5 comentários:

  1. Muito massa (y) eu acho que no meu próximo layout eu vou colocar u,u

    sense-wonder.blogspot.com.br

    ResponderExcluir
  2. que lindo *u* amei Guuh! nota 1000 pra esse menu

    ResponderExcluir
  3. Código meio grande mas legal o menu eu adorei!

    XOXO :D
    jovenclube(.blogspot.com.br)

    ResponderExcluir
  4. Perfeito já vou usar no meu novo layout mais com os créditos....

    http://kawaiitutosmf.blogspot.com.br/

    ResponderExcluir