16 de mar de 2015

Como fazer um menu + Explicação de alguns códigos

|| ||
"Eu fico esperando você sentir minha falta todo dia." (I Miss You)
Hello Peoples!! 

Estão bem? Espero que sim. Eu estou vendo Supernatural, muito boa a série recomendo, também assisti The Maze Runner é um filme tão bom (apesar de ser só o primeiro). Enfim, hoje vim ensinar como fazer um menu e explicar alguns códigos para "Enfeitá-lo".


Recomendo que abra o word ou o bloco de notas para isso, não o HTML, pois por experiência própria, um código errado estraga o lay inteiro.

Kaory{ esse é o nome do menu lembre-se de colocar sempre um "chave" depois do nome.
Esses códigos abaixo tem que ter em qualquer menu.

Font-family: 'PF arma five' fonte do texto do menu
Color: #fff; essa é a cor da fonte
Text-align: center; o alinhamento do texto
Font-size: 12px; tamanho da fonte
Background: #000; cor do fundo do menu
Padding: 3px; tamanho do menu
Width: 21%; largura do menu

Kaory:hover{ depois daqui coloque todos os códigos lá em cima só que em cores diferentes (se você quiser)

Font-family: 'PF arma five' fonte do texto do menu
Color: #fff; essa é a cor da fonte
Text-align: center; o alinhamento do texto
Font-size: 12px; tamanho da fonte
Background: #000; cor do fundo do menu
Padding: 3px; tamanho do menu
Width: 21%; largura do menu

Códigos legais :3

Border:1px solid #ffccff; cor e estilo da bordinha
-webkit-transition-duration: .80s; tempo de duração do efeito
Border-radius: 3px; bordas arredondadas
Text-shadow: 1px 1px 1px #f5f5f5; cor e posição da sombra da fonte
-webkit-transform: rotate(-180deg); código de rotação
Box-shadow: inset 0 0 18px #FFE4E1, 0 0 3px #FFD1CC; cor e posição da sombra interna
Border-left: 3px solid #D682DE; cor, estilo e espessura da borda direita
Border-right: 3px solid #D682DE; cor, estilo e espessura da borda esquerda
Outline: 1px dashed #fff; Cor e espessura da bordinha pontilhada

Enfim peoples esse foi o post de hoje >3<
Está completamente PROIBIDO reblogar este tuto mesmo que com créditos, fiquei quase a tarde inteira pesquisando os códigos.
Beijos da Kaory


6 comentários:

  1. Minha amiga é super viciada em Supernatural, ela já tentou me arrastar para o lado hunter da força, mas não deu muito certo :P. Estou muito afim de ler The Maze Runner, tenho essa mania um tanto chata de querer ler os livros antes de ver os filmes.
    Você explicou bem direito, o tutu está ótimo. Sempre tive vontade de criar menus, mas nunca sabia como fazer, vou tentar fazer para ver se dá certo ;).
    Beijos ღ! | Indie

    ResponderExcluir
    Respostas
    1. A Minha também -q ashahsh amigas são para isso né? Eu também estou aceitando o livro -n eu vejo os filems depois os livros, não sei porque ><'
      Obrigada ♥ Eu também não tentei... depois quero ver esses menus divos -q

      Excluir
  2. Oi c:
    Gostei muito do tutorial, vai me ajudar bastante xD
    Beijo!

    ||Crazy Cake ||

    ResponderExcluir
  3. Amei o post, você explica super bem, e isso ajuda bastante quem não entende de HTML!
    Beijos :*

    umanerdfashionista.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Então meu público alvo nessa postagem foi justamente os iniciantes em HTML!!
      Beijos :3

      Excluir

Hey Dreammer, como está? Vai comentar? Primeiro leia as regrinhas >u<
☆ Os comentários são moderados
☆ Sim, as vagas estão abertas para afiliados.
☆ Palavrões são permitidos desde que não forem usados para ofender
☆ Se não gostou e está disposto a começar uma briga, saia.
☆ Faça somente críticas construtivas
☆ Retribuo todos os comentários, só tenha paciência.
☆ Deixe o link do seu blog para eu poder visitá-lo X3
☆ If you don't speak portuguese, don't hesitate to comment in your language! Be Welcome!
☆ Si tú no hablas portugués, no vacile y comente in español. ¡Bienvenido!

(っ・з・)っ ~ ♥ (≧◡≦) (≧∇≦)(ó㉨ò) ┐ (´ー`)┌ 〈( ^.^)ノ ᕦ(ò_óˇ)ᕤ ᕙ(⇀‸↼‶)ᕗ (∩︵∩) (╯︵╰,) (╹◡╹) (◑.◑) (◐.̃◐) (・_・ヾ (´・_・`) 【・_・?】 ( ゚д゚) (。_゜) ⊙.☉ \(〇_o)/ (⊙﹏⊙✿) (◕﹏◕✿) (◕‿◕✿) (◕︿◕✿) (◡‿◡✿) (◠△◠✿) (◕ω◕✿) (◠ω◠✿) (◠︿◠✿) (◠﹏◠✿) (◠‿◠✿) (ノ⊙ヮ⊙) (╯°□°)╯ಠ_ಠ ( ̄。 ̄)~zzz (°ロ°)ヽ (゜∇゜)ノ (ノ◕ヮ◕)ノ (▰˘◡˘▰) (︶▽︶) (。・_・。) (・ェ-) (。◕ ‿ ◕。) ʘ‿ʘ ╮ (─▽─)╭ ᕦ(ò_óˇ)ᕤ (≧ω≦) (^▽^) ( ̄□ ̄) (¬_¬) (╥_╥) (╯3╰) (¬‿¬) (◣_◢) (≧o≦) (⋋▂⋌) (॓_॔) (─‿‿─) (∩︵∩) (⊙_◎) (。♥‿♥。) (~ ̄▽ ̄)~ ★~(◠‿◕✿) (∩˃o˂∩) ~ヾ(^∇^) (づ。◕‿‿◕。)づ (ノ◕ヮ◕)ノ*:・゚✧ (;一_一) (¬_¬) (¬‿¬) (◕ ‿ ◕)/