20 de set de 2013

Menu Fufly

Olá pessoal, hoje trago para vocês mais um menu, ele se chama menu fufly e é super cute.
Para ver o menu clique aqui

Para usá-lo, cole o seguinte código acima de ]]></b:skin>

@font-face { font-family: Pf Arma Five ; src: url('http://static.tumblr.com/nzkyikd/mELmnr7zm/pf_arma_five.ttf') }
.fluffy {
background: #c1b2e8; /* cor do fundo */
padding: 6px;
margin: 1px;
text-align: center;
font-family: Pf Arma Five;
font-size: 8px;
box-shadow: inset 0px 0px 8px #9b80d2, 0px 0px 5px #9b80d2; /* sombras da caixa */
-webkit-box-shadow: inset 0px 0px 8px #9b80d2, 0px 0px 5px #9b80d2; /* sombras da caixa */
-moz-box-shadow: inset 0px 0px 8px #9b80d2, 0px 0px 5px #9b80d2; /* sombras da caixa */
outline-offset: -3px;
outline: 1px dashed #fff; /* cor da linha pontilhada */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}
.fluffy1 {
background: #fe9ab9; /* cor do fundo */
padding: 6px;
margin: 1px;
text-align: center;
font-family: Pf Arma Five;
font-size: 8px;
box-shadow: inset 0px 0px 8px #fd7eb4, 0px 0px 5px #fd7eb4; /* sombras da caixa */
-webkit-box-shadow: inset 0px 0px 8px #fd7eb4, 0px 0px 5px #fd7eb4; /* sombras da caixa */
-moz-box-shadow: inset 0px 0px 8px #fd7eb4, 0px 0px 5px #fd7eb4; /* sombras da caixa */
outline-offset: -3px;
outline: 1px dashed #fff; /* cor da linha pontilhada */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}


@font-face { font-family: Pf Arma Five ; src: url('http://static.tumblr.com/nzkyikd/mELmnr7zm/pf_arma_five.ttf') }

Esta é a fonte do menu, se não quizer é só apagar este trecho.


Para fazer o menu fufly funcionar coloque o código abaixo no gadget html/java script

<div style="float: left; width: 20%">
<a href="#" title="descrição"><div class="fluffy">link</div></a>
</div>
<div style="float: left; width: 20%">
<a href="#" title="descrição"><div class="fluffy1">link</div></a>
</div>
<div style="float: left; width: 20%">
<a href="#" title="descrição"><div class="fluffy">link</div></a>
</div>
<div style="float: left; width: 20%">
<a href="#" title="descrição"><div class="fluffy1">link</div></a>
</div>
<div style="float: left; width: 20%">
<a href="#" title="descrição"><div class="fluffy">link</div></a>
</div>


Lembrando que a cor do link em menus de sidebar fica a mesma cor dos links que você
colocou para sua sidebar.

Nenhum comentário :

Postar um comentário

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo