Tutorial - Menu Lista

Helou beibis!
Sei que tá errado, ok? Ontem eu não disse que minha mãe alugou iCarly - One Direction? Então é legal e eu quase fiquei gritando no ouvido dela, mas consegui me conter... mais ou menos. Eu só odiei a voz dele dubladas. Nossa, eu queria ser a Carly ou a Sam!

O post vai ser para um tutorial. Sei que o blog não foi dedicado à isso, mas como fui eu que criei esse menu "lista", resolvi abrir uma pequena exceção. Eu peguei como base do menu, esse efeito aqui. Dá onde surgiu a ideia? Eu vi muitos blogs usando isso e não achei nenhum tutorial, então lembrei desse efeito e resolvi personalizar, e deu nisso:

Gostaram? Continue lendo!



Então, vamos lá?

1 - Procure (Ctrl + F) por ]]></b:skin>. Ao achar esse código, cole acima dele:
.lista a {
color:#CORDAFONTENORMAL;
}
.lista {
color:#CORDAFONTE;
font: 8px "PF Arma Five", small fonts;
text-transform: uppercase;
text-align:left;
background: #fff;
border-bottom: 1px dotted #CORDABORDANORMAL;
padding:2px;
padding-left: 8px;
-webkit-transition-duration: .99s;
border-radius: 2px;
box-shadow:inset 0px 20px 0px #fff;
}
.lista:hover {
color:#CORDAFONTEHOVER;
padding-left : 15px;
border-bottom: 1px dotted #CORDABORDAHOVER;
}
2 - Personalize usando as cores que quiser, colocando-as nos lugares destacados em negrito.

3 - Para usar no post, é só colocar:
<div class="lista">Escreva algo</div>
Espero que tenham gostado!

❝Obs: Se usar, credite o blog e o Kawaii World!

Nenhum comentário:

Postar um comentário