26/01/2013

Tutorial - Menu Suddlently


Bom dia!
Faz bastante tempo que não posto aqui. Mas tô sempre visitando, eu não sumi. Espero que vocês me desculpem por não estar postando, é porque está bem corrido e o tempo apertado. Mas, eu posto sempre que dá.

Hoje eu vim trazer um tutorial de um menu bem legal, ficaria bom no cabeçalho. Visualize ele clicando aqui. Bem fofinho né? Eu aprendi no We Heart Html. Vamos ao tutorial?


1. Vão em modelo, editar html e procurem por ]]></b:skin, acima dele cole:
@font-face {
font-family: "iconsrs";
 src: url('http://static.tumblr.com/8nqsmq9/IZHmb2sjk/heydings_icons.ttf')
}
.menurscomeco {
background: #75a6cc;
 font-family: 'tahoma';
 font-size: 500px;
 color: #fff;
 width: 50px;
 height: 50px;
 display: inline-block;
 margin-right: 5px;
 text-align: center;
 -webkit-transition-duration: .50s; border-radius: 500px;
 -moz-box-shadow: inset 0 0 15px #56799e;
 -webkit-box-shadow: inset 0 0 15px #56799e;
 box-shadow: inset 0 0 15px #56799e;
 overflow: hidden;
}
.menurscomeco:hover {
overflow: hidden;
 background: #75a6cc;
 font-family: 'Yanone Kaffeesatz';
 color: #fff;
 font-size: 40px;
 display: inline-block;
 margin-right: 5px;
 width: 50px;
 height: 50px;
 text-align: center;
 -webkit-transition-duration: .50s;
border-radius: 500px;
 -moz-box-shadow: inset 0 0 15px #ebebeb;
 -webkit-box-shadow: inset 0 0 15px #ebebeb;
 box-shadow: inset 0 0 15px #ebebeb;
}
.menurscomeco icon {
font-family: 'iconsrs';
 color: #fff; font-size: 50px;
text-shadow: 0px 0px 10px #FFFFFF;
 -webkit-transition-duration: .50s;
}
.menurscomeco:hover icon {
text-shadow: 0px 0px 5px #fff;
O código está bem fácil de se entender. Qualquer dúvida, pergunte.
2. Vá em layout, adicionar um gadget/JavaScript e cole:
<a href="SEU LINK"><div class="menurscomeco"><icon>A LETRA CORRESPONDENTE AO ÍCONE QUE VOCÊ QUER</icon></div></a>

3 comentários:

  1. Ayla,como você faz aquilo com a ilutração do post?

    ResponderExcluir
  2. Ual, deve ficar super lindinho,amo esses tutoriais!

    Beijos ♥
    blogjeitounico.blogspot.com

    ResponderExcluir
  3. Gaabi, fiz pelo photoscape essa ilustração ^3^

    ResponderExcluir

Heart It