Outros
Menu de Pages - Tutorial
Estou de novo aqui, apenas por um motivo: tédio. E até porque estou super passando mal, nem sei como fui à escola hoje, devido às olimpíadas, saí cedo graças à meu bom Deus @--@ Estou cheia de dor de cabeça e ainda resfriada, o pior é a tontura, você anda e parece se seu cérebro tá pulando :c
Achei super legal o fato de vocês terem gostado do layout free de halloween, mesmo ele não tendo nadica de nada de halloween -.- e vi que pediram pelos comentários, um tutorial de como fazer aquele menu do topo, confesso que pensei em usar no próximo layout do A.N, mas por esses dias estou sem inspiração para terminar o layout, aí comecei a fazer outro modelo de layout para o próximo do A.N, não me decido. Então, hoje trouxe como fazer esse menu do topo: Prévia ~x
Cole acima de ]]></b:skin>:
.menudepages {
text-align: center;
position: fixed;
z-index: 1000000;
width: 100%;
top: 0; left: 0;
background: #c2bdc7;
height: 25px;
padding: 5px;
word-spacing: 10px;
}
.menudepages a{
color: #ccc8d0;
text-shadow: 1px 1px 0 #afa8b5;
font-family: "simple";
font-size: 20px;
-webkit-transition-duration: 1s;
}
.menudepages a:hover {
color: #d6d3d9;
text-shadow: 1px 1px 0 #a59eac;
}
@font-face {
font-family: "Simple";
src: url("http://static.tumblr.com/jxlyjkb/3LBmpn15n/bebasneue.otf");
font-weight: normal;
font-style: normal;
}
Agora, cole em um HTML // Javascript:
<div class="menudepages">
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
</div>
http://adolescentenerd.blogspot.com.br/2013/10/menu-de-pages-tutorial.html
Menu Up & Down + 1004 Seguidores?! ^0^
- Irei pensar em algo para recompensá-los pela meta ( >.< )
Yoo mutantes perfeitos (~'w')~
Estou super feliz pois quando entrei hoje no blog pude ver que estamos com 1004 seguidores, eu...fiquei super...FELIZ mesmo! Pois ontem, o dia inteiro, a internet não queria funcionar, então não pude fazer o post que me pediram sobre o menu que estamos usando, e consequentemente, não pude ver o número de choco seguidores. E quero agradecer também pelos elogios nos comentários do post anterior, irei retribuir todas as visitas quando puder.
Então, já que hoje a internet está funcionando (e tinha mesmo, pois estou fazendo um dever de história e tenho que pegar algumas cifras para amanhã) irei trazer o tutorial do Menu up & down, créditos ao Eu Amo HTML (www), nosso querido afiliado :)
Acima de ]]></b:skin> cole:
.fade-isa {font-family: trebuchet ms;font-size: 11px;padding: 5px;background-color: #COR DO FUNDO (ROSA);box-shadow: inset 0 0 20px #COR DA SOMBRA INTERNA (ROSA), 0 0 4px #ccc;text-align: center;width: TAMANHO DO MENUpx;text-transform: uppercase;word-spacing: 5px;letter-spacing: 1px;-webkit-transition-duration: .80s;}.fade-isa a {color: #COR DA FONTE;text-align: center;padding-top: 20px;padding-bottom: 20px;padding-left: 5px;padding-right: 6px;text-shadow: 2px 1px 1px #COR DA SOMBRA DO TEXTO;-webkit-transition-duration: .80s;}.fade-isa a:hover {color: #COR DA FONTE AO PASSAR O MOUSE;text-shadow: 2px 1px 1px #COR DA SOMBRA AO PASSAR MOUSE;text-align: center;padding-top: 5px;padding-bottom:5px;padding-left: 5px;padding-right: 6px;background-color: #COR DO QUADRADINHO (AZUL);box-shadow: inset 0 0 20px #COR DA SOMBRA DO QUADRADINHO (AZUL), 0 0 4px #ccc;-webkit-transition-duration: .80s;}
Configure as informações em maiúsculo e cole em um HTML / Javascript:
<div class="fade-isa"><a href="LINK" title="Mensagem do Tooltip">Nome</a><a href="LINK" title="Mensagem do Tooltip">Nome</a><a href="LINK" title="Mensagem do Tooltip">Nome</a><a href="LINK" title="Mensagem do Tooltip">Nome</a><a href="LINK" title="Mensagem do Tooltip">Nome</a><a href="LINK" title="Mensagem do Tooltip">Nome</a><a href="LINK" title="Mensagem do Tooltip">Nome</a></div>
- O "Mensagem do Tooltip" é aonde ficará a mensagem do tooltip, se você não quiser que apareça tooltip, apague "title="Mensagem do Tooltip""
http://adolescentenerd.blogspot.com.br/2013/08/menu-up-down-1004-seguidores-0.html
Efeito 180 graus
hihi (www) - comecei a usar esse site hoje --'
Olá pandas, ah não, confundi, vocês são humanos mesmo '-'
Mais tudo bem com vocês? espero que sim, estou com uma preguiça hoje, só queria dormir, mais o pc é tão tentador >.<' e eu tenho que estudar pra R.P.M [não, não é uma banda ç.ç ] ~> Resolução de Problemas Matemáticos e para mim é só uma coisa ~> cha-ti-sse que me fer-ra na es-co-la '-' e o pior, acho que estou de recuperação nessa matéria, amanhã com certeza farei a recuperação, ninguém merece, todos na minha sala acharam difícil a prova, já tem matemática, pra quê R.P.M? O.o'
Hoje trouxe para vocês um tutorial de como fazer o efeito do 'nerd' lá no banner, não sei se perceberam, mais se você colocar o mouse acima do 'nerd', ele irá girar como no exemplo (www)
Achei super fofo, pois ele gira devagar, deixando super kawaii.
Vamos aprender?
Adaptei um pouco os links pois peguei esse tutorial do tumblr (www).
Para começar, clique na setinha, e procure por ]]></b:skin> e cole acima:
.close {border-radius:5px;transition:All 3.0226s ease;-webkit-transition:All 3.0226s ease;-moz-transition:All 3.0226s ease;-o-transition:All 3.0226s ease;transform: rotate(4deg) scale() skew() translate(10px);-webkit-transform: rotate(4deg) scale() skew() translate(10px);-moz-transform: rotate(4deg) scale() skew() translate(10px);-o-transform: rotate(4deg) scale() skew() translate(10px);-ms-transform: rotate(4deg) scale() skew() translate(10px);}.close:hover {transform: rotate(360deg) scale(1) skew(1deg) translate(0px);-webkit-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);-moz-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);-o-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);-ms-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);}
E para terminar, é só colar em um HTML // Javascript:
<img src="Imagem" class="close" />
Espero que tenham gostado, se algo não der certo, perguntem pelos comentários ^^'
Agora irei atualizar o chocomapa :3
Agora irei atualizar o chocomapa :3
http://adolescentenerd.blogspot.com.br/2013/07/efeito-180-graus.html
0 comentários: