27/08/2016

[Tutorial] Menu Sweet Light

Oi oi pessoas bonitas e feias do meu coração! Como estão? Não sei se já usei essa imagem antes, chega uma hora na sua vida que você posta a tanto tempo que nem sabe as imagens que usou nos posts... Espero que vocês não achem a imagem de introdução uma grande coisa porque vocês estão vendo aí a minha situação -e também porque fico mais de 30 minutos escolhendo a imagem que vou usar no post e no final ela não tem nada a ver com o que eu escrevo. Bem... Esse post é programado, mas não tenham preconceito, ok? A tia tá sem tempo -q

Quem quiser ver a prévia, ela está no primeiro gadget desse layout. Vá em Modelo > Editar HTML > Aperte Ctrl+F e pesquise por ]]></b:skin> e acima disso, cole o código a seguir:
.sweetlight { /*menu do gadget de bem-vindo*/
margin: 3px;
border-radius: 50px;
font-family: verdana; /*tipo da fonte*/
text-align: center;
font-size: 20px;
padding: 3px;
display: inline-block;
font-weight: lighter;
background: #f9f9f9; /*cor do interior da bolinha*/
color: #346e79; /*cor da fonte*/
-webkit-transition-duration: .90s;
border: 3px solid #1b5c68; /*cor da borda*/
width: 30px;
height: 30px;
}
.sweetlight:hover {
-webkit-animation: hey 1s alternate; /*não mude*/}
@keyframes hey {
0% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);}
25% {
color: transparent;
border: 3px solid transparent;}
50% {
color: #3f5348; /* aqui um tom mais escuro que a fonte do início */}
75% {
box-shadow: 0px 0px 30px #9fd1b6; /* cor da sombra no final */
-webkit-transition-duration: .90s;}
100% {
box-shadow: none;
-webkit-transition-duration: .90s;}
}
Eu destaquei as cores pra ficar mais fácil. Para usar, é só usar o código abaixo quantas vezes você quiser:
<a href="LINK" title="NOME"><div class="sweetlight">&#8487;</div></a>
Para que os botões fiquem um abaixo do outro, adicione a tag <br/> depois de cada linha.

E se quiser que o menu fique ao lado do gatget, coloque este código acima do anterior, mude os números caso precise. Quando terminar, não esqueça de fechar o código final com </div>
<div style="position:absolute; margin-left: -50px; margin-top: -7px; background: #transparent;">
Obrigada pra você que leu até aqui, tenha uma boa noite <3

6 comentários:

  1. Oi, Hari! O menu é muito bonito, adorei o efeito dele!

    Beijos (っ˘з(˘⌣˘ ) ♡
    -bárbara não tem nome

    ResponderExcluir
  2. Obaaaa, adoro ter novos modelos de menu pra usar! Inclusive esses dias eu tava fazendo um layout e fiquei "meu jesuis, não tenho menuuuuu", então é ótimo ter mais opções. Obrigada e boa noite! <3

    ResponderExcluir
    Respostas
    1. Eu também sofro disso, odeio quando fico sem menu, bate um desespero! Por nada, eu que agradeço <3

      Excluir
  3. Yooo Hari-chan~ Tudo bom?

    Hasuhas sei como é... eu também passo cerca de meia hora escolhendo uma foto bacanuda e tals. Daí chega no final a imagem não tem NADA relacionado ao assunto :') Mas o que importa é que se nós curte, nós deixa (ai meu pt kkkkk)

    Oba! Tuto!! Amo tutoriais. Eu ainda estou naquela de futricar HTML e tentar fazer um template. Não digo que sou a ~Le Ninja Manjadora dos HTML, mas alguma coisa consigo arrumar rsrs. Se eu tomar vergonha na cara e fazer um lay (feito por mim tipo assim... 100% kkkk) e precisar de Menus sei aonde vir ^^ Agradeço a tuto! Muito boa!
    Chu~
    ◑▽◐

    ResponderExcluir
    Respostas
    1. Oi oi <3
      Eu nem tenho mais fotos pra usar de tão idoso que é esse blog, Gzuiz! E eu usei essa imagem do Ace duas vezes seguidas, tudo bem... Ace nunca é demais.

      Eu também gosto deles, acho que saíram de moda, mas ainda adoro testar uns tutoriais que ahco por aí pra dar um ar a mais pro meu bloguinho. Shhuashua de boa, você consegue, ninguém nasceu sabendo HTML

      Excluir

Vai comentar? Leia as regrinhas:

~ Pode abusar dos palavrões o quanto quiserem, mas ofensas serão excluídas. Caso queiram criticar, críticas construtivas por favor;
~ "Seguindo, segue de volta?" Sim, mas fale um pouco do post também;
~ Pedidos? Fiquem a vontade;
~ Lemos a todos os comentários e sempre os respondemos;
~ No fim do comentário deixe o link de seu blog, se gostarmos, seguimos com prazer .

Pode comentar agora!