Tutorial: Menu Fluffy

|| ||
Porquê tão perfeitos?

Pessoal que eu amo por demais do meu coração, vocês são minhas paçocas que eu mais amo nessa vida inteira que eu tive e vou ter até morrer rimou. Eu estava sentindo muita falta de vocês e, para compensar o tempo gasto, estou preparando um novo layout aqui para o blog ficar bem mais bonito igual a vocês, leitores. Porque eu acho que fica uma coisa muito monótoma o mesmo layout sempre né? Faz uns cinco meses eu acho que o MK não muda de visual. Isso já é um bom tempo.

Ei minha gente, eu trouxe finalmente um tutorial para vocês! Tcharaaam! Ebaaaa! Já faz um tempo enorme que eu não deixo um tutorial para os meus leitores que eu fico até de boca aberta. As minhas postagens estão recheadas de goodies, e por quê não um tutorial? Por isso, como eu sou muito atenciosa com vocês, eu hoje vim lhes trazer um tutorial de um menu que é a coisa mais linda. Eu vou deixar a preview dele aqui e também os créditos onde eu peguei no geek & girle. E esse menu é muito perfeito.

1. Cole em um gadget Html/JavaScript:
<center>
<fluffy-fix> Menu!</fluffy-fix>
<a href="LINK" id="fluffy">Assunto1</a>
<a href="LINK" id="fluffy">Assunto2</a>
<a href="LINK" id="fluffy">Assunto3</a>
<a href="LINK" id="fluffy">Assunto4</a>
</center>
<style>
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#fluffy {
margin: 1px;
padding: 2px;
border: 1px solid #FABBD6;
color:#fff;
background: #FFD2E5;
text-shadow: 0px 1px 0px #FABBD6;
font-family: silkscreen;
font-size: 8px;
text-align: center;
float:center;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
box-shadow:inset 1px 1px 0px #fff;
border-radius : 1px;}
fluffy-fix {
background: #C2D4FF;
cursor: help;
padding: 3px;
margin: 1px;
border: 1px solid #A0BCFF;
color: #fff;
font-family: silkscreen;
font-size: 8px;
float: none;
text-shadow: 0px 1px 0px #A0BCFF;
text-transform: uppercase;
box-shadow:inset 1px 1px 0px #fff;
border-radius : 1px;}
</style>
 2. Altere as partes destacadas e salve.

2 comentários:

  1. Amei o tuto, e o gif de inicio é tão kawaii *-*

    Beijocas, conheça: oclubdoscupcake.blogspot.com

    ResponderExcluir