9 de fev de 2014

Menu de duas cores - K-World


Ooi gente gata >3<  
Espero que considerem a minha lindeza de ficar acordada até agora mexendo em códigos ok? Então me amem ^^
Além dos códigos eu to acordada até agora porque eu vou viajar com o meu irmão, a gente vai pra Amaral Ferrador. Uma cidade com umas vinte ruas e no máximo uns 2, 3 mil moradores. E vocês devem estar se perguntando (ou não...) porque eu vou ir pra lá? Porque lá tem um rio muito lindo e nesse calor eu tomo banho até na caixa d'água!!! 
Mas chega de blá, blá, blá porque ninguém tá a fim de saber se eu tomo banho na caixa d'água né? Hoje o post é sobre um tutorial muito legal que eu vi lá no K-World que é como fazer esse menu aqui muito fofo:

                                                


Todos os créditos são de lá ok? Só quis repassar porque adorei o tutorial.
Enfim vá lá no tradicional ]]> e cole acima da tag o seguinte código:
#tags{
background-color: #e5e1e7;
width: 56px;
height: 12px;
font-family: verdana;
font-size: 11px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
color: #b2a1ad;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #dcd5df;
-moz-box-shadow:    inset 0 0 5px #dcd5df;
box-shadow:         inset 0 0 5px #dcd5df;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#tags2{
background-color: #ffe4ea;
width: 56px;
height: 12px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #fdd7df;
-moz-box-shadow:    inset 0 0 5px #fdd7df;
box-shadow:         inset 0 0 5px #fdd7df;
color: #f7b0bf;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;} 
         
E depois cole no seu gadget o seguinte código:
    <a href="seu link" id="tags">Texto</a>
    <a href="seu link" id="tags2">Texto</a>
    <a href="seu link" id="tags">Texto</a>
    <a href="seu link" id="tags2">Texto</a>
    <a href="seu link" id="tags">Texto</a><a href="seu link" id="tags2">Texto</a>
Enfim edite o que precisar e seja feliz hahaha
Beijoooooos                                                                                                  

6 comentários: