22 de mar de 2014

Menu Border

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

<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

3 comentários:

  1. Cara frio é life <3.. kk mas entendo vc :/ aqui no Mato Grosso é calor que não acaba mais jesus chega a fritar cozinhar kkkkk
    Ameii mto o menuzinho, é tão fofo >;<

    bjs
    || minha--loucura.blogspot.com.br ||

    ResponderExcluir
  2. 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

    Eu 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

    ResponderExcluir

  3. Muito bacana o tutorial quando precisa vou vim aki conferir sem duvidas bloge lindo
    P.S seguindo o seu blog

    http://b-maluco.tk/

    ResponderExcluir

- Não xingue ninguém, pois toda ação tem uma reação.
- Não julgue a opinião dos leitores. Se fizessem isso com você, você não gostaria, certo?
- Não peça pra seguir de volta ou visitar seu blog. É deselegante.
- Não xingue meu blog. Ele é feito com muito esforço, e não gosto de ninguém "pisando" nele :)