22 de ago de 2012

Menu Shadow Inset

Tumblr_m94gh4ifyi1ruh223o1_500_large

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:

Isadora Georgea disse...

Adorei o menu, lindo, gostei mesmo ♥ Anw, tudo por aqui é lindo, né? Nem tem como discutir Anna, rs.

Beijos
georgea.tk

Laurinha :3 disse...

Amei! Ficou super diwo! Talvez eu use, no próximo layout! :)

julieta-do-seculo-xxi.blogspot.com
ll-theotherside.blogspot.com

A.Carollyne {World Cutest} disse...

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/

Ana Paula Janúario disse...

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

- disse...

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

SM disse...

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

Grande Coragem disse...

Uhhh tava precisando de um post que ensine isso! *-* adorei e vou tentar aqui :D
beijo, rê

http://grandecoragem.blogspot.com.br/

Grande Coragem disse...

Uhhh tava precisando de um post que ensine isso! *-* adorei e vou tentar aqui :D
beijo, rê

http://grandecoragem.blogspot.com.br/

Ҩ. luana oliveira ! disse...

Adoorei esse estilo de menu,mt fofo!
Otimo turial e obg por comentar la no meu blog flor <3
Beijos !
www.paradateen1.blogspot.com

Hay Barros disse...

AMEI O TUTO ^^
s2hay.blogspot.com

Leticia Lopes (Katy°) disse...

Perfect :) menina você é dahora!
http://blog-allthelovers.blogspot.com.br/

Ana Luiza disse...

Adoreii! > 3<
Seguindo aqui =^.^=
http://garotas-a-bordo.blogspot.com.br

Larissa Sá disse...

Amei o tutorial, quando trocar meu lay eu vou usar esse menu *-* Estou seguindo.

http://princesazika.blogspot.com.br/

Giu Rezende disse...

eei, esse menu é super lindo!
foi você que fez né? só pode!

Beijos, Giu.
advanced-html.blogspot.com

Mollie disse...

Adorei o menu, bem fofinho e delicado :3

http://chassy-bomb.blogspot.com.br/

Luly disse...

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

Dri disse...

Awn, que menu fofo! #EUQUEROTODOPARAMIM, tirem os olhos -n
http://pinkpimenta.blogspot.com.br/

Luly disse...

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.

Kamilla Fernandes. disse...

Noooossa , como fica fofo né? Coloquei no meu blog de testes...Hahha! ;DD

garotas-amargas.blogspot.com

Camila disse...

Fica muito bonito o resultado.
Adorei!

Beijos,
http://mundorosaachock.blogspot.com/

Kayla Cristina disse...

Que legal esse menu :D
ask.fm/KaylaCristina12
bjiim :*
(clica no nome pra acessar ao blog :()

Jaqueline Santos disse...

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 ?

Leticia Lopes (Katy°) disse...

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.

Leticia Lopes (Katy°) disse...

falando de outro assunto , acc afiliação? séria uma honra! <3

Luiz Gustavo disse...

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~

A.Carollyne {World Cutest} disse...

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/

彼女 disse...

Que lindo!
It-Teen.blogspot.com

Letícia Caroline disse...

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!

Kawanny Arruda disse...

Que lindo o menu, parabéns pelo código criado. Beijos!

http://wwwgertiegirlcom.blogspot.com.br

Milleny disse...

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/

Betty Gaeta disse...

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

Kelly Oliveira disse...

Adorei o tutu e ja salvei o link dele! :)
http://kelly-club.blogspot.com.br/

Milleny disse...

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/

Luly disse...

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.

Isabela Godoy disse...

Amei o tutorial, tô procurando menus diferentes pro DG, com certeza vou tentar fazer esse! :D


http://www.deliriosdegarota.com/

Alex Monteiro disse...

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

Isabela Lopes disse...

Adorei teu blog.O tutorial super perfeito.
Segue meu blog tá?
http://bella-make-up-s2.blogspot.com.br/

Leticia Lopes (Katy°) disse...

A mesmo assim muito obrigado <3,um beijoo coma amor ♥
All the lovers.

Confidence Girl disse...

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)

Dayane disse...

Que bonito! Amr, isso que é postagem! kkkk!

http://crazy-planet.blogspot.com.br/

Emy disse...

Muito lindo, achei que combinou o nome com o menu. Adorei.
http://my-history-restarted-again.blogspot.com.br/

Amanda Sartorio disse...

Meniiiina q unha é essa xonei!

to seguiiindo me segue também?

http://amandasartorio.blogspot.com.br

Milleny disse...

Obrigada por aceitar o pedido da postagem !
Beijos .

(clica no meu perfil para ver o blog)

Kamilla Odorizzi disse...

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

Stephanie ^~^ disse...

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:)

Stephanie ^~^ disse...

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:)

Rafaela Thomé disse...

Que fofo o menu flor! Vou testar.

(clica no meu perfil para ver meu blog e evitar spam)

Layany Melo disse...

que legal!!curtii..:)
Flor to seguindo o seu cantinho,se de segue o meu tbm..beijoss e bom fds!!
www.mabmel.blogspot.com

Luana Nogueira disse...

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*

Giith//Morango com Chocolate disse...

Nossa fica Realmente lindo msm!
Ei acabei de descobrir seu Blog,muito lindo viiu?kk'Seguindo parabens Lindo seu Layout!Beijos
Morangocom.blogspot.com

Thais Passos disse...

Que menu lindo!Amei
http://runawayinwonderland.blogspot.com.br/

- disse...

Acabei de reparar qe eu to sempre aqui. KODSKADOSAKDO Kd o post novo? heheh
bunnets.blogspot.com.br

Beezus disse...

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

Blog Quinze verões disse...

Gostei bastante do menu, o efeito dele é bem bonito. Ótimo tutorial.
Blog Quinze Verões (blogspot)

Larissa disse...

Amei tudo!
http://larissafdb.blogspot.com.br/