Como fazer um menu em texto
Autor: ☆~Lisa~☆ | Publicado: 2017-01-03T17:13:00-02:00





Bom dia, pudins &lt;3


Primeiramente, feliz 2017! Espero que este seja um ano maravilhoso para todos nós, e também com atualizações mais frequentes aqui, hahaha


Hoje, trouxe uma postagem sugerida pela Iza, do Snack Cheese, que é sobre como fazer um menu completamente personalizado por você. É um tutorial enorme, que tive que dividir em quatro partes. Mas está tudo bem explicadinho, então não é tão complicado &gt;&lt;



Este é um menu em texto. Queria ensinar também como fazer os efeitos para imagens, mas, como a postagem ficaria muito longa, vou deixar para a próxima &gt;3&lt; Teremos muitos códigos pela frente, então, para não se perder, recomendo abrir o bloco de notas ou mesmo o Word (onde você ainda terá os destaques em negrito/itálico/sublinhado). Vamos lá!



Modo normal


O código abaixo refere-se à apresentação normal do menu. Troque "NOMEDOEFEITO" pelo nome que você dará ao efeito (obviamente), sem usar espaços. Coloquei algumas "sugestões", caso não queira alguma, apague a linha correspondente:

.NOMEDOEFEITO {
color:#fff; /* cor do texto */
font-family: X; /* fonte */
font-size: Xpx; /* tamanho da fonte */
text-transform: X; /* uppercase p/ tudo maiúsculo, lowercase p/ minúsculo */
letter-spacing: 0px; /* espaçamento das letras */
text-align: center; /* alinhamento do texto */
text-shadow: 1px 1px 1px #fff; /* sombra do texto */
box-shadow: inset 1px 1px 1px #fff; /* sombra da caixa */
width: Xpx; /* largura */
height: Xpx; /* altura */
margin: 1px 1px 1px 1px; /* margem */
padding: 2px 2px 2px 2px; /* acolchoamento */
background: #X; /* cor do fundo */
border-radius: Xpx Xpx&nbsp;Xpx&nbsp;Xpx; /* borda arredondada */
border: 1px solid #fff; /* borda */
transition-duration: 0.8s; /* transição lenta */
-webkit-transition-duration: 0.8s; /* transição lenta */
-moz-transition-duration: 0.8s; /* transição lenta */
}
Como personalizar a borda:

1px - tamanho
solid - linha reta. Para pontinhada, troque para dotted, e, para tracejada, dashed
#fff - cor da borda
Para colocar uma imagem ao invés de cor no fundo, troque a linha por:

background: url(LINK DA SUA IMAGEM)&nbsp;
Fora tudo isso, você também pode acrescentar:

font-style: italic; /* itálico */
text-decoration: bold; /* negrito */
text-decoration: underline; /* sublinhado */
text-decoration: line-through; /* tachado */
text-decoration: overline; /* linha acima do texto */


Modo hover


Este é o código do menu quando você passa o mouse. Coloque apenas o que você quer que seja alterado neste modo. Por exemplo, se quer que a cor de fundo mude, acrescente background: #COR;. Não esqueça de alterar para o nome do efeito.

.NOMEDOEFEITO:hover {
EFEITOS AQUI
}
Outros efeitos:

ROTAÇÃOtransform: rotate(ÂNGULOdeg) ;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
-ms-transform: rotate(0deg) ;
MIGRARtransform: translate(LADOSpx, CIMA/BAIXOpx);
-webkit-transform: translate(16px, 0px);
-moz-transform: translate(16px, 0px);
-o-transform: translate(16px, 0px);
-ms-transform: translate(16px, 0px);
TAMANHOtransform: scale(largura, altura);
-webkit-transform: scale(0.835, 1);
-moz-transform: scale(0.835, 1);
-o-transform: scale(0.835, 1);
-ms-transform: scale(0.835, 1);
DEFORMAÇÃOtransform: skew(LADOSdeg, CIMA/BAIXOdeg) ;
-webkit-transform: skew(2deg, 0deg) ;
-moz-transform: skew(2deg, 0deg) ;
-o-transform: skew(2deg, 0deg) ;
-ms-transform: skew(2deg, 0deg) ;

+ = baixo / direita- = cima / esquerda


No HTML

Coloque ambos códigos desta maneira:

.NOMEDOEFEITO {
efeitos do modo normal}
.NOMEDOEFEITO:hover {
efeitos do modo hover}
E, em seguida, cole acima de ]]&gt;&lt;/b:skin&gt;.


No gadget


Cole o código abaixo em um gadget de HTML/Javascript (mais uma vez: não esqueça de alterar o nome do efeito):

&lt;center&gt;
&lt;a href="LINK"&gt;&lt;div class="NOMEDOEFEITO"&gt;TEXTO&lt;/a&gt;&lt;/div&gt;
&lt;a href="LINK"&gt;&lt;div class="NOMEDOEFEITO"&gt;TEXTO&lt;/a&gt;&lt;/div&gt;
&lt;a href="LINK"&gt;&lt;div class="NOMEDOEFEITO"&gt;TEXTO&lt;/a&gt;&lt;/div&gt;
&lt;a href="LINK"&gt;&lt;div class="NOMEDOEFEITO"&gt;TEXTO&lt;/a&gt;&lt;/div&gt;
&lt;/center&gt;

Visualize o efeito. Provavelmente, não estará do jeitinho que você planejou. Vá alterando o código até estar bonitinho.





Espero que tenham gostado do tutorial! Se foi de alguma ajuda ou se você usará, por favor&nbsp;coloque créditos, porque foi bem demorado para organizar tudo isso hahaha



Tantas explicações me deram a ideia de criar uma página explicando um pouco sobre HTML básico, como um índice de códigos. Dessa forma, vocês poderiam ir direto no efeito desejado, não seria necessário explicar tudo isso em todo post, e poderia ajudar quem não tem tanta experiência nessa área. O que vocês acham? :)



~Abraços!



P.S.: meu computador está com alguns probleminhas novamente, e vai levar algum tempo até que isso seja resolvido. Infelizmente ficarei sumida aqui :/