Tutorial - Menu Blue Dream

 

Yoo ^-^

Primeiro quero me desculpar por postar tão pouquinho. Eu estou escrevendo um livro (: .  E também porque meu Photoshop tá meio "bugado" - Tem hora que abre, tem hora que não - e eu estou tentando descobrir o que é. Todavia, vou tentar me compensar postando alguns tutoriais. 

Enfim, trago aqui um tutorial novinho em folhas para vocês de um menu muito bonitinho - Menu Blue Dream. Ele tem esse nome porque é originalmente azul. Mas você pode mudar a cor dele á vontade :3

Ele é bem simples, e acho que ele combina bastante com blog's de tutoriais e/ou com um design mais clean.

Espero que gostem ^.^ ~

Primeiro: Pegue o código abaixo. Ele corresponde á fonte do menu. caso não queira ela, ignore essa parte.

@font-face {

  font-family: 'Play';

  font-style: normal;

  font-weight: 400;

  src: local('Play'), url(http://themes.googleusercontent.com/static/fonts/play/v3/-SXnV4mZjf4oh1IBw13WZw.woff) format('woff');

}

Salve

Segundo: Pegue este outro código abaixo. Ele corresponde á personalização do menu, como cores e etc.

.soleil {font-family: 'Play'; font-size: 8px; text-transform: uppercase;  margin-bottom: 1px;  text-indent : 20px; height:15px;-webkit-transition-duration: .30s; background : #eee;padding:2px;padding-left: -15px; padding-top: 5px; text-shadow: 1px 1px 1px #fff; letter-spacing: 1px; border-radius: 10px; margin-bottom: 2px;}

.soleil a {color: #888;}

.soleil a:hover {color: #fff;}

.soleil:hover { background : #000080; color: #fff;-webkit-transition-duration: .30s; ;text-shadow: 1px 1px 1px #b6c6d3;}

Personalize o que quiser. Em seguida, salve.

Terceiro: Adicione um novo gadget de HTML e adicione o seguinte código:

<div class="soleil"> <a href="http://url">NOME DO LINK</a></div>

<div class="soleil"> <a href="http://url">NOME DO LINK</a></div>

Salve. Espero que seja útil e que tenham gostado ~ ♥