Oi gente, tudo bem? Aqui em Porto Alegre tá um frio de rachar. Sim, eu odeio inverno, prefiro mil vezes o verão ♥ quando está frio minhas mãos e pés congelam, eu fico fungando, tenho crises de asma e por isso preciso tomar um remédio horrível e tenho preguiça de levantar, ou seja, tenho 20% a mais de chances de perder a aula de manhã. Enfim, sabem aquele menu do lay Meet a Owl que disponibilizei? Então, hoje o tutorial é dele :3 peço encarecidamente que não mudem as cores, trouxe ele em 4 modelos diferentes então não há necessidade de alterar.
Esse menuzinho é mais para cabeçalho, creio que se usar na sidebar com muitos links vai ficar feio...
Como vocês viram, há 4 modelos com cores diferentes, então abaixo seguirão os códigos:
Rosa - cole acima de ]]></b:skin>
.rosa {
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #fbc9d7, 1px 1px 0 #fbc9d7, -1px -1px 0 #fbc9d7, -1px 1px 0 #fbc9d7, 1px -1px 0 #fbc9d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(251,215,225, 1.0);;
box-shadow: inset 1px 1px 0 #fad5df;
padding: 2px 6px 2px;
border-right: 8px solid #fbc9d7;
border-top: 1px solid #fbc9d7;
border-left: 1px solid #fbc9d7;
border-bottom: 1px solid #fbc9d7;
-webkit-transition-duration: .50s;
}
.rosa:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #fbc9d7, 1px 1px 0 #fbc9d7, -1px -1px 0 #fbc9d7, -1px 1px 0 #fbc9d7, 1px -1px 0 #fbc9d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(251,215,225, 1.0);;
box-shadow: inset 1px 1px 0 #fad5df;
padding: 2px 6px 2px;
border-right: 1px solid #fbc9d7;
border-top: 1px solid #fbc9d7;
border-left: 8px solid #fbc9d7;
border-bottom: 1px solid #fbc9d7;
-webkit-transition-duration: .50s;
}
Em um gadget HTML/Javascript, cole:
<center>
<div class="rosa"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="rosa"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="rosa"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="rosa"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="rosa"><a href="/" title="Início"><font color = "white">home</font></a></div>
</center>
Azul - cole acima de ]]></b:skin>
.azul {
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7d6d7, 1px 1px 0 #c7d6d7, -1px -1px 0 #c7d6d7, -1px 1px 0 #c7d6d7, 1px -1px 0 #c7d6d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(215,227,227, 1.0);;
box-shadow: inset 1px 1px 0 #d2dfe0;
padding: 2px 6px 2px;
border-right: 8px solid #c7d6d7;
border-top: 1px solid #c7d6d7;
border-left: 1px solid #c7d6d7;
border-bottom: 1px solid #c7d6d7;
-webkit-transition-duration: .50s;
}
.azul:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7d6d7, 1px 1px 0 #c7d6d7, -1px -1px 0 #c7d6d7, -1px 1px 0 #c7d6d7, 1px -1px 0 #c7d6d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(215,227,227, 1.0);;
box-shadow: inset 1px 1px 0 #d2dfe0;
padding: 2px 6px 2px;
border-right: 1px solid #c7d6d7;
border-top: 1px solid #c7d6d7;
border-left: 8px solid #c7d6d7;
border-bottom: 1px solid #c7d6d7;
-webkit-transition-duration: .50s;
}
Em um gadget HTML/Javascript, cole:
Roxo - cole acima de ]]></b:skin>
Em um gadget HTML/Javascript, cole:
Cinza - cole acima de ]]></b:skin>
Em um gadget HTML/Javascript, cole:
Substituindo os links:
Então é isso, espero que tenham gostado das cores que escolhi, foram as básicas :3 se usar credite e não repasse
<center>
<div class="azul"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="azul"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="azul"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="azul"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="azul"><a href="/" title="Início"><font color = "white">home</font></a></div>
</center>
Roxo - cole acima de ]]></b:skin>
.roxo {
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7bdca, 1px 1px 0 #c7bdca, -1px -1px 0 #c7bdca, -1px 1px 0 #c7bdca, 1px -1px 0 #c7bdca;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(210,202,211, 1.0);;
box-shadow: inset 1px 1px 0 #ccc4ce;
padding: 2px 6px 2px;
border-right: 8px solid #c7bdca;
border-top: 1px solid #c7bdca;
border-left: 1px solid #c7bdca;
border-bottom: 1px solid #c7bdca;
-webkit-transition-duration: .50s;
}
.roxo:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7bdca, 1px 1px 0 #c7bdca, -1px -1px 0 #c7bdca, -1px 1px 0 #c7bdca, 1px -1px 0 #c7bdca;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(210,202,211, 1.0);;
box-shadow: inset 1px 1px 0 #ccc4ce;
padding: 2px 6px 2px;
border-right: 1px solid #c7bdca;
border-top: 1px solid #c7bdca;
border-left: 8px solid #c7bdca;
border-bottom: 1px solid #c7bdca;
-webkit-transition-duration: .50s;
}
Em um gadget HTML/Javascript, cole:
<center>
<div class="roxo"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="roxo"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="roxo"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="roxo"><a href="/" title="Início"><font color = "white">home</font></a></div><div class="roxo"><a href="/" title="Início"><font color = "white">home</font></a></div>
</center>
Cinza - cole acima de ]]></b:skin>
.cinza{
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #e4e4e4, 1px 1px 0 #e4e4e4, -1px -1px 0 #e4e4e4, -1px 1px 0 #e4e4e4, 1px -1px 0 #e4e4e4;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(240,239,238, 1.0);;
box-shadow: inset 1px 1px 0 #eeedec;
padding: 2px 6px 2px;
border-right: 8px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
-webkit-transition-duration: .50s;
}
.cinza:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #e4e4e4, 1px 1px 0 #e4e4e4, -1px -1px 0 #e4e4e4, -1px 1px 0 #e4e4e4, 1px -1px 0 #e4e4e4;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(240,239,238, 1.0);;
box-shadow: inset 1px 1px 0 #eeedec;
padding: 2px 6px 2px;
border-right: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
border-left: 8px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
-webkit-transition-duration: .50s;
}
Em um gadget HTML/Javascript, cole:
<center>
<div class="cinza"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="cinza"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="cinza"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="cinza"><a href="/" title="Início"><font color = "white">home</font></a></div>
<div class="cinza"><a href="/" title="Início"><font color = "white">home</font></a></div>
</center>
Substituindo os links:
- todos esses / vocês substituem pelos links que o menu vai redirecionar.
- todos esses Início vocês substituem pelo título que vai aparecer no tooltip quando se passa o mouse.
- todos esses home vai ser o que vai aparecer ali no menu mesmo :D
Então é isso, espero que tenham gostado das cores que escolhi, foram as básicas :3 se usar credite e não repasse
Cara frio é life <3.. kk mas entendo vc :/ aqui no Mato Grosso é calor que não acaba mais jesus chega a fritar cozinhar kkkkk
ResponderExcluirAmeii mto o menuzinho, é tão fofo >;<
bjs
|| minha--loucura.blogspot.com.br ||
Eu AMO frio, como você não gosta? :O Eu ainda sonho que o frio faça as aulas serem canceladas e /sonha alto n QWERTYTREWQWERTYTREWQ
ResponderExcluirEu lembro desse menu *xora* <3 ELE É TÃO LINDO COM ESSA SOMBRA INTERNA E A BORDINHA E... (ãh? n) <333333
Mas, tipo, a pessoa não pode diminuir o tamanho do menu pra por na side? Só uma ideia, daí eu faço isso rsrs N QWERTYTREWQERTY /retardada
Tá, tchau Takerota LEMDA <3
ResponderExcluirMuito bacana o tutorial quando precisa vou vim aki conferir sem duvidas bloge lindo
P.S seguindo o seu blog
http://b-maluco.tk/