Depois de ficar quebrando a cabeça pra fazer um menu que prestasse, acho que consegui um resultado bom. Estou começando a entender essas coisas de HTML, portanto, se o menu não estiver legal, é por isso. Não sabia que nome dar a ele, eu coloquei Shadow Inset (que quer dizer sombra por dentro) porque dentro de cada caixinha dele, tem uma sombra.
Em seu estado normal, o menu tem todas as bordas arredondadas. Mas quando você passa o mouse, as bordas desaparecem e os cantos ficam quadrados! Printei pra vocês verem melhor:
Gostaram? Peço que coloquem os créditos. Você pode modificar as cores e o tamanho como quiser, ok? Aqui está o código. Espero que aproveitem bastante :)
/* ----- Menu Shadow Inset por garota-queen.tk ----- */
sigq {
text-align: center; /* alinhamento do texto */
width: 15%; /* tamanho da caixa */
padding: 3px; /* altura */
float: left; /* posicionamento da caixa */
background: #FF5050; /* fundo */
color: #fff; /* fonte */
border-radius: 30px; /* bordas arredondadas */
box-shadow: inset 0px 0px 30px #fff; /* sombra */
-webkit-transition-duration: .90s; /* tempo de duração */
margin: 3px; /* espaço entre uma caixa e outra */
}
sigq:hover {
background: #FFBBBB; /* fundo */
color: #000; /* fonte */
border-radius: 0px; /* bordas arredondadas, deixe 0 */
letter-spacing: 3px; /* espaço entre as letras */
-webkit-transition-duration: .90s; /* tempo de duração */
/* ----- Menu Shadow Inset por garota-queen.tk ----- */
}
Cole esse código acima de ][><b:skin>. E para usar, abra um novo gadget de JavaScript/HTML e cole nele assim, para cada caixa (tópico):
<a href="LINK_DA_PÁGINA"><sigq>NOME_DA_PÁGINA</sigq></a>
55 comentários:
Adorei o menu, lindo, gostei mesmo ♥ Anw, tudo por aqui é lindo, né? Nem tem como discutir Anna, rs.
Beijos
georgea.tk
Amei! Ficou super diwo! Talvez eu use, no próximo layout! :)
julieta-do-seculo-xxi.blogspot.com
ll-theotherside.blogspot.com
O menu ficou lindo, Anna. Meus parabéns. Ele é ótimo pra inserir no cabeçalho, e não ficou ruim não viu?
Um beijo,
http://world-cutest.blogspot.com/
O tutorial ficou perfeito bem explicadinho e super lindo. Já votei na enquete o lay está lindo. Amor por que você não faz um tutorial de como fazer status , como esse que você usa , já vi tantos blogs usando e acho lindo , só que não entendo muito de html. É só uma sugestão , iria amor , beijos e continue assimque você vai longe , chara ( amo te chamar assim)Beijo anninha <3
Adolescentes do Oposto
Eu curti o Menu, ta bem legal. Eu vi uma mina com a unha igual a essa, sendo que as bolinhas ( não sei como chama) estavam em todos os dedos. Ficou ridicula!
bunnets.blogspot.com.br
Nossa, que menu perfeito Annitcha <3 Super diferente, eu adorei! Já está muito boa em HTML viu? Fez o seu primeiro menu! rs.
Beijinhos, Paula
sweetmakeups2.blogspot.com
Uhhh tava precisando de um post que ensine isso! *-* adorei e vou tentar aqui :D
beijo, rê
http://grandecoragem.blogspot.com.br/
Uhhh tava precisando de um post que ensine isso! *-* adorei e vou tentar aqui :D
beijo, rê
http://grandecoragem.blogspot.com.br/
Adoorei esse estilo de menu,mt fofo!
Otimo turial e obg por comentar la no meu blog flor <3
Beijos !
www.paradateen1.blogspot.com
AMEI O TUTO ^^
s2hay.blogspot.com
Perfect :) menina você é dahora!
http://blog-allthelovers.blogspot.com.br/
Adoreii! > 3<
Seguindo aqui =^.^=
http://garotas-a-bordo.blogspot.com.br
Amei o tutorial, quando trocar meu lay eu vou usar esse menu *-* Estou seguindo.
http://princesazika.blogspot.com.br/
eei, esse menu é super lindo!
foi você que fez né? só pode!
Beijos, Giu.
advanced-html.blogspot.com
Adorei o menu, bem fofinho e delicado :3
http://chassy-bomb.blogspot.com.br/
Awn, Anna, ficou lindo! Eu sempre quis saber um pouquinho mais de html para me arriscar a fazer alguns códigos diferentes e tudo mais. Bem, só falta dizer que ficou perfeito, não? Super aprovado, ficou ótimo! Então, posso contar com você ainda hoje? Espero que sim. Um beijo.
the-zombie-attack.blogspot.com
Awn, que menu fofo! #EUQUEROTODOPARAMIM, tirem os olhos -n
http://pinkpimenta.blogspot.com.br/
Ah, que bom que você vai conseguir postar. Bem, e como é a primeira vez, quero deixar bem livre, você escolhe. Uma sugestão? Gosto de posts um pouquinho mais longos, então, eu apostaria em algumas dicas. Mas, como disse, você escolhe.
Noooossa , como fica fofo né? Coloquei no meu blog de testes...Hahha! ;DD
garotas-amargas.blogspot.com
Fica muito bonito o resultado.
Adorei!
Beijos,
http://mundorosaachock.blogspot.com/
Que legal esse menu :D
ask.fm/KaylaCristina12
bjiim :*
(clica no nome pra acessar ao blog :()
Adorei , Muito bom !
Parabéns ...
Bjus
http://rosachoquemakeup.blogspot.com.br/2012/08/make-antes-e-depois.html
Canal do youtube:
http://www.youtube.com/watch?v=pxLv4SHeUEM&feature=plcp
Se inscreve ?
Obrigada flor,eu também <3
(ve o link do meu blog pelo meu perfil.ficou sabendo sobre que se copiar CTRL + C no link do seu e blog e colar no comentário é SPAM e eles excluiam seu blog por isso?)veja mais lá no PART OF ME.
falando de outro assunto , acc afiliação? séria uma honra! <3
Nossa fica super legal o menu, ja salvei o link pra usar no próximo lay do meu blog!
Beijos, e estarei sempre aqui no seu blog, pois é um lugar onde me sinto bem,um lugar onde me aconchego!
(Pra ver meu blog, clique no meu nome) ~o blog ta excluindo blogs de quem comenta com link~
Já soltei post novo Anna <3. O WC está bem desatualizado esses dias, pois estou na semana de provas e não tenho vida kkkk. Sabe como é né? Rs.
Um beijão,
http://world-cutest.blogspot.com/
Que lindo!
It-Teen.blogspot.com
Que lindo o efeito, nunca vi um igual! Gostei bastante!!
Garota Vertigem
ps: O blog está excluindo pessoas que comentam com link, portanto se você for retribuir o comentário clique no perfil pra ver o blog. Obrigado!
Que lindo o menu, parabéns pelo código criado. Beijos!
http://wwwgertiegirlcom.blogspot.com.br
Amei o menu,ficou super lindo e divo!
Parabens,o resultado ficou incrivel.
Que pena que não tem mais vagas linda :/ mas fazer oque né ? ;
O merito é todo seu,seu blog apareceu como Blog Divo,porque o GQ merece .
Beijos.
http://blog-sweetimagination.blogspot.com/
Oi Anna,
O blog está em um formato lindo e o menu ficou perfeito. parabéns!
Cheguei ao seu blog por acaso e estou gostando muito. Já estou seguindo e vou ficar muito feliz se vc tb me seguir.
xoxo
GOSTO DISTO!
www.gosto-disto.com
Adorei o tutu e ja salvei o link dele! :)
http://kelly-club.blogspot.com.br/
Oi posso pedir um tutoriais ? Se a resposta for SIM (risos),eu queria pedir pra você postar como deixar a area dos comentário que nem a do seu blog,tem como você portar isso pra mim ? Aguardo a respota .
Beijos.
http://blog-sweetimagination.blogspot.com/
Anna, primeiro, muito abrigada por fazer um esforcinho e conseguir postar no TZA ontem. O post ficou ótimo, sério mesmo. Gostei das imagens usadas, também do jeito que você escreveu, tudo bem certinho. E não se preocupe se o post não ficou londo, entendo você. Espero que tenha gostado de postar no TZA. EU vou responder todos os comentários do seu post, mas se quiser responder algum em especial... tudo bem. Obrigada de novo.
Amei o tutorial, tô procurando menus diferentes pro DG, com certeza vou tentar fazer esse! :D
http://www.deliriosdegarota.com/
Arraso demais Anna, sério, ficou LINDO *----*
Sem falar que o efeito tanto hover, quanto normal ficaram super legais e diferentes do que a gente costuma ver também :)
Parabéns viu? <3
Bjão!
Alex Monteiro - Part Of Me
Adorei teu blog.O tutorial super perfeito.
Segue meu blog tá?
http://bella-make-up-s2.blogspot.com.br/
A mesmo assim muito obrigado <3,um beijoo coma amor ♥
All the lovers.
Olha eu vou usar no blog q eu estou fazendo e vou fazer uma pagina de creditos,e coloco que foi vc que a autora do menu!
Achei lindo ele !
bonecadeetiqueta
blogspot
com
(eu coloquei assim por causa do spam)
Que bonito! Amr, isso que é postagem! kkkk!
http://crazy-planet.blogspot.com.br/
Muito lindo, achei que combinou o nome com o menu. Adorei.
http://my-history-restarted-again.blogspot.com.br/
Meniiiina q unha é essa xonei!
to seguiiindo me segue também?
http://amandasartorio.blogspot.com.br
Obrigada por aceitar o pedido da postagem !
Beijos .
(clica no meu perfil para ver o blog)
Annnwt ♥
Esse blog é tãão perfeito (:
Lógico que eu estou seguindo!
Olha, podia me dar uma força? Criei o blog a pouco tempo, dá uma passadinha lá? (Esse menu fica lindo né??.)
Beijos. ♥
apiiece-ofme.blogspot.com
Wooow, parábens, ficou muuito divoow o menu ^^'
Garota do Olhar Sincero ^~^ (P.s: Confere o blog clicando no meu perfil, é porque o blog está excluindo os blogs que deixam o link no final do comment S:)
Wooow, parábens, ficou muuito divoow o menu ^^'
Garota do Olhar Sincero ^~^ (P.s: Confere o blog clicando no meu perfil, é porque o blog está excluindo os blogs que deixam o link no final do comment S:)
Que fofo o menu flor! Vou testar.
(clica no meu perfil para ver meu blog e evitar spam)
que legal!!curtii..:)
Flor to seguindo o seu cantinho,se de segue o meu tbm..beijoss e bom fds!!
www.mabmel.blogspot.com
Que Lindo *ww*
anna posso falaar contigo depois?
gostaria de saber se quer ser postadora do meu blog!
http://tricksofthefashion.blogspot.com.br/
espero que aceite *w*
Nossa fica Realmente lindo msm!
Ei acabei de descobrir seu Blog,muito lindo viiu?kk'Seguindo parabens Lindo seu Layout!Beijos
Morangocom.blogspot.com
Que menu lindo!Amei
http://runawayinwonderland.blogspot.com.br/
Acabei de reparar qe eu to sempre aqui. KODSKADOSAKDO Kd o post novo? heheh
bunnets.blogspot.com.br
Oi adorei o post e mais ainda o blog !
Vim aqui mesmo para ver se você pode divulgar o sorteio se um Mini Iphone...
http://aonething.blogspot.com.br/2012/08/quer-ganhar-um-iphone.html
Gostei bastante do menu, o efeito dele é bem bonito. Ótimo tutorial.
Blog Quinze Verões (blogspot)
Amei tudo!
http://larissafdb.blogspot.com.br/
Postar um comentário