15 de mai de 2013

Tutorial: Menu hover deslizante!


Ooii! Tudo bem?

Pois é, fiquei alguns dias sem postar aqui, como eu disse há alguns dias, tive que desinstalar meu computador... Mas hoje, finalmente, deu para postar!!

Hoje tem tutorial: Menu hover deslizante!

Esse tutorial é do blog Kawaii World, então, se reblogarem, deem os créditos.
E, se quiserem ver uma live preview é só clicar AQUI.

Para ver o tuto, clique em read more :)

1. Vá em editar HTML, aperte CTRL+F e procure por ]]></b:skin>

2. Acima dele, cole o seguinte código:

.heart {
display : block;
font-size: 10px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px solid #eee;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
padding-left : 3px;
-webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;
border-left: solid #CORDABORDA;
background: #CORDOFUNDO;
color: #666 !important;
}
.heart:hover {
display : block;
text-decoration: none;
vertical-align: middle;
line-height: 15px;
background: #CORDOFUNDOHOVER;
border-left: solid #CORDABORDAHOVER;
padding-left: 15px;}

Altere as partes destacadas e salve.

3. Em um gadget HTML/JavaScript, cole:

<div class="heart"> Seu texto </div>

Digite onde está destacado e salve!!

Espero ter ajudado :)

Beijooos
Duda 

2 comentários:

  1. Já tinha visto esse tuto. É bem simples e ajuda bastante!
    eusourebeldeevocebrasil.blogspot.com.br

    ResponderExcluir