3 menus para gadget de "welcome" (✿◕‿◕)

Boa noite pessoal , como vão? eu vou bem . Minha prima me chamou pra passar uns dias na casa dela de última hora , por esse motivo eu sumi de repente , peço perdão . Bom acordei á exatas 4 horas , e ja ta anoiteceu de novo , estou sentindo como se o dia tivesse sido ultra curto , bom pra mim realmente foi. Juntando o fato de que eu dormi muuito tarde com o de ter visto uma foto realmente assustadora ( até pra mim ) e não ter conseguido pegar no sono é até compreensivel que eu tenha acordado á essa hora q e provavelmente tambem não vou conseguir dormir de novo por estar cheia de energia .. Ô vida uhauhsasuhasaus


Enfim , um leitor(a) me pediu na ask que postasse um menuzinho parecido com o que eu uso aqui ao lado da side do blog , então aqui está ele , e resolvi trazer também mais 2 menus que já havia feito a muito tempo para que a postagem ficasse digamos assim menos 'vazia', porém esses outros 2 são posicionados na horizontal no próprio gadget >33< . Acho que todo mundo já sabe as regras certo? não repassar ou usar como base , e creditar sempre :3

modelo vertical , com hover em opacity

cole encima de ]] :

#won { background: #ffe6ea; text-shadow: 1px 1px 0px #ffc8d3; width: 8px; height: 11px; color:#fff; padding: 5px; font-size:8px; display: block; border: 1px solid #ffc8d3; box-shadow: inset 1px 1px 2px #fff; opacity: 0.50; -webkit-transition-duration: .80s text-decoration:none; } #won:hover { opacity: 1.0; padding: 5px; text-decoration:none; } #won a { text-decoration:none; padding: 5px; } #won a:link { color: #fff;} #won a:hover { color: #fff;} #won a:visited { color: #fff;}

em um gadget html/js :

<div style="position: absolute; margin-top: -90px; left: 260px;"> <a id="won" href="LINK" tiptitle="NOME">01</a> <a id="won" href="LINK" tiptitle="NOME">02</a> <a id="won" href="LINK" tiptitle="NOME">03</a> <a id="won" href="LINK" tiptitle="NOME">04</a></div>

Modelo rosa com shadow

cole antes de ]]

@font-face { font-family: 'PF Arma Five'; src: url('http://static.tumblr.com/xf6erfz/sUBm594pm/pf_arma_five.ttf'); src: format('truetype');} #menu { font-family: PF Arma Five; text-align: center; text-shadow: 1px 1px 0px #ffd5dd; font-size: 8px; color: #fff; background: #ffe7ec; border: 1px solid #ffd6de; padding-left: 6px; padding-right: 6px; padding-top: 2px; padding-bottom: 2px; line-height: 14px; display: inline-block; border-radius: 2px; box-shadow: inset 0 0 5px #ffd5dd , 2px 2px 0px #f3f3f3 ,inset 1px 1px 1px #fff;; -webkit-transition-duration: .80s; text-decoration: none; } #menu a:link { text-shadow: 1px 1px 0px #ffd5dd; font-size: 8px; color: #fff; } #menu a:hover { text-shadow: 1px 1px 0px #ffd5dd; font-size: 8px; color: #fff; } #menu a:visited { text-shadow: 1px 1px 0px #ffd5dd; font-size: 8px; color: #fff; }

em um gadget html/js :

<a href="LINK" id="menu" tiptitle="NOME">Time</a> <a href="LINK" id="menu" tiptitle="NOME">Time</a> <a href="LINK" id="menu" tiptitle="NOME">Time</a>

modelo azul com box shadow , e efeito embutido

cole acima de ]] :

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/hy7mzgw/tusmw3v70/handy00.ttf');} #menu2 { font-size: 8px; text-shadow: 1px 1px 0px #d0d4ef; color:#fff; background: #e7eaf9; padding-left: 8px; padding-right:8px; padding-top:4px; padding-bottom:4px; text-align: center; box-shadow: inset 1px -8px 1px rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.6); border: 1px solid #d0d4ef; border-radius: 2px; text-decoration:none; font-family:handy; }

em um gadget html/js :

<a href="LINK" id="menu2" tiptitle="nome">nome</a> <a href="LINK" id="menu2" tiptitle="nome">nome</a> <a href="LINK" id="menu2" tiptitle="nome">nome</a>