10/02/2014

Menus em 3d para afiliados!

||

Olá anjos tudo bem? Aqui quem está na área é a Roh Chan (*^3^)/ prazer para quem ainda não me conhece, e olá novamente para quem já me conhece e está se perguntando nossa senhora até aqui essa guria ta postando? Uhum até aqui eu estou postando, e vão se acostumando pois a louca aqui veio para ficar o/ até queria me desculpar pela a demora pois já era para eu estar postando a muito tempo, mas andaram acontecendo algumas coisas em minha vida e eu me perdi toda (~_~), mas eu to aqui né? Bem para os que já me conhecem sabem meu jeito de postar e sabem que amo adoro de paixão postar efeitos, menus, tudo que tenha algum efeito e transição é comigo, amo mesmo e já disse no Having Cherry que é meu ponto forte, o resto até faço e posto mas não são aquilo tudo nada que digam nossa que lindo ¬¬, mas eu tento né? Isso o que importa pois pelo menos em algo sou boa não é mesmo? ^ε^

Então como havia escrito amo criar menus e a onda do momento agora é tudo com efeito 3d, tipo eu não uso nada no meu layout com esse tipo de efeito mas já vi em outros blogs e posso garantir que é muito fofo, antes até que achava meio feio e brega mas acho que os que eu tinha visto eram feios e mal feitos mas enfim é a vida uma hora odeia e na outra ama UHUAHushus, mas então vamos ao tuto?


 LIVE PREVIEW 

Vá até o deu modelo e clique em editar html, dentro procure por ]]skin; e acima dele cole o modelo desejado:  


Modelo Rosa
menu3d {
color:#fff;
text-shadow: 1px 1px 1px #FBB4E2;
background: #fdddf2; 
border: 1px solid #fdbcd2;
box-shadow: inset 1px 1px 0px #fdeef8;
line-height:20px; margin:-1px;
margin-bottom:1px;
display: inline-block;
padding-top: 5px;
border-radius:2px;
text-align: center;
font-family: PF Arma Five;
font-size: 8px; 
float: center; 
padding:1px;  
height: 20px; 
width: 60px;
-webkit-transition-duration: .80s;
}
menu3d:hover {
cursor:hand;
-webkit-transition-duration: .80s;text-align: center;
font-family: PF Arma Five; font-size: 8px; color:#FBB4E2;
text-shadow: 1px 1px 1px #fff;
}

Links
<a href="LINK"><menu3d>Vaga</menu3d></a>
<a href="LINK"><menu3d>Vaga</menu3d></a>
<a href="LINK"><menu3d>Vaga</menu3d></a>

Modelo Roxo 
menu3d1 {
color:#fff;
text-shadow: 1px 1px 1px #C3B7CE;
background: #D4CDDB; 
border: 1px solid #C8BFD1;
box-shadow: inset 1px 1px 0px #E6E4E8;
line-height:20px; margin:-1px;
margin-bottom:1px;
display: inline-block;
padding-top: 5px;
border-radius:2px;
text-align: center;
font-family: PF Arma Five;
font-size: 8px; 
float: center; 
padding:1px;  
height: 20px; 
width: 60px;
-webkit-transition-duration: .80s;
}
menu3d1:hover {
cursor:hand;
-webkit-transition-duration: .80s;text-align: center;
font-family: PF Arma Five; font-size: 8px; color:#B1A2BF;
text-shadow: 1px 1px 1px #fff;
}

Links 
<a href="LINK"><menu3d1>Vaga</menu3d1></a>
<a href="LINK"><menu3d1>Vaga</menu3d1></a>
<a href="LINK"><menu3d1>Vaga</menu3d1></a>

Modelo Azul 
menu3d2 {
color:#fff;
text-shadow: 1px 1px 1px #BDD3D4;
background: #D5E3E4; 
border: 1px solid #BDD3D4;
box-shadow: inset 1px 1px 0px #ECF2F2;
line-height:20px; margin:-1px;
margin-bottom:1px;
display: inline-block;
padding-top: 5px;
border-radius:2px;
text-align: center;
font-family: PF Arma Five;
font-size: 8px; 
float: center; 
padding:1px;  
height: 20px; 
width: 60px;
-webkit-transition-duration: .80s;
}
menu3d2:hover {
cursor:hand;
-webkit-transition-duration: .80s;text-align: center;
font-family: PF Arma Five; font-size: 8px; color:#B9D0D2;
text-shadow: 1px 1px 1px #fff;
}

Links 
<a href="LINK"><menu3d2>Vaga</menu3d2></a>
<a href="LINK"><menu3d2>Vaga</menu3d2></a>
<a href="LINK"><menu3d2>Vaga</menu3d2></a>

Um comentário:

  1. Cara que menu lindo <3 Uma perfeição *OOOOO*
    Acabei de fazer um layout mas já vou fazer outro então, vou usa-lo ^^''
    Tá lindo.
    querendo-voar.blogspot.com.br || Querendo Voar ~ ( Visite )

    ResponderExcluir