Lord Html | Welcome.

Veja o menu

Peguei um menu que tinha feito e dei um jeito de deixar ele fofinho. Sempre gosto de mexer no shadow e fazer coisas legais, porque sim, tem como fazer isso. Antes de postar o código vou explicar algumas coisas.

CSS:

A primeira div/class, que é chamada de .simplemenu é a div de posição, referencia em fontes, valor da fonte e entre outras coisas. Nessa div a gente vai determinar que fonte vamos usar, qual o tamanho, se ela vai ficar em caixa baixa ou alta (text-transform). O que não deve ser tirado é o overflow hidden, que é o que faz com que nada saia de dentro daquele local. Essa div tem um valor determinando então o tamanho dela, que é os 800px no width e tem também o height. Dai vai depender do tamanho que você usou para o local do menu no seu theme. O line-height é do mesmo valor do height em questão, isso é o alinhamento do texto dentro da caixa, colocando o mesmo valor referente ao height vai ficar ‘centralizado’ de cima para baixo. O position absolute informa que vai ficar por cima de qualquer coisa e o margin-top e left informa a direção que o menu vai ter, onde ele vai ficar.

A class/div .simplemenu a determina a formatação do link que estiver dentro da div simplemenu. Ou seja, é nessa parte que temos que dar espaçamento entre os links, que usamos o text-shadow para o efeito. No text-shadow eu usei um -1000px para que demorasse um pouco até que o texto aparecesse e que sumisse ao nossos olhos, porque o que realmente queremos é que apareça apenas ao passar o mouse. Usei um color normal na fonte, você deve escolher uma cor que bata com seu theme. Usei o margin left e right para dar espaçamento entre os links. Ainda na formatação do link, temos um border-bottom: 5px solid transparent; e no local onde seria a cor temos o comando para que fique transparente. Isso faz com que o border exista mas não apareça. Porque se eu não colocasse isso e no hover eu colocasse uma cor no border, faria um efeito estranho, como se o menu tivesse subindo. (ou não).

A div/class .simplemenu a:hover é a a formatação do hover do link, dai tem todo o esquema do shadow já com o numero 0 que faz com que apareça. O color esta transparente para que apenas o shadow fique com a cor escolhida e temos o border já com a cor determinada.

O que temos que reparar é que tem o transition no hover e no não hover, isso faz com que a transição seja lenta e fique bonito.

E é isso, não tem mistério.

Código css, você deve colocar isso antes de

/* ------- creative shadow   ---- */ .simplemenu { overflow: hidden; text-transform: uppercase; cursor: pointer; font-family: "Futura Md BT"; position: absolute; margin-left: 0px; margin-top: 10px; width: 800px; background: #fff; height: 50px; line-height: 50px; font-size: 15px; letter-spacing: 1px; font-weight: bold; -webkit-box-shadow: 0px 0px 4px #b1d8c5; -moz-box-shadow: 0px 0px 4px #b1d8c5; box-shadow: 0px 0px 4px #b1d8c5;} .simplemenu a { color: #b1dac6; margin-left: 10px; margin-right: 10px; text-shadow: -1000px 0px 0px #d6bc97; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .simplemenu a:hover { color: transparent; text-shadow: 0px 0px 0px #d6bc97; -webkit-transition: text-shadow 0.5s ease; -moz-transition: text-shadow 0.5s ease; -o-transition: text-shadow 0.s ease; border-bottom: 5px solid #eee;}

Agora vem o HTML, você deve por depois de body ou dentro do seu header.

Primeiro de tudo, devemos criar a imagem, sim, vou usar imagem mas pode fazer em outro estilo, mas quero assim.

Ao criar nossa imagem, ela deve ter o tamanho do local onde o menu vai ficar. Ou seja, minha faixa tem o height de 45px então o height da imagem vai ter esse valor. Temos que criar uma div de posição para o menu:

/* Home menu */ #menu { width: valordolocalondeomenuvaificarpx; text-align: right; overflow: hidden; background: transparent; position: absolute; margin-top: 0px; height: 45px; margin-left: 0px; }

Essa é a div de posição,saiba mais sobre posição em tagged/position Agora, o que precisamos criar é a div a, que informa a personalização dos links que ficará dentro da div id menu.

#menu h1 { padding: 0px; margin: 0px;} #menu a { font-family: 'Segoe UI'; font-weight: bold; font-size: 15px; text-transform: uppercase; padding-left: 22px; padding-right: 22px; display: inline-block; -webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out; height: 45px; line-height: 45px; background: url(IMAGEM) bottom center; color: #afa9a9; margin-left: 10px; }

Voltando para a parte da imagem, ao criar ela vai ter o height de 45 certo, o width você pode fazer do tamanho que for ou do tamanho que fores usar para cada link. Usei um width pequeno, porque dai carrega rápido. Se a imagem tem 45 de height, vou abrir um documento com 90px de height. Vou colocar a imagem em questão na parte de cima e deixar a parte de baixo transparente. Veja.

No css acima, que é o #menu a temos na linha background o bottom center isso é o mesmo que background-position mas dai já colocamos ali para não ocupar muito espaço. Como ali informa o bottom center, a imagem vai se repetir e vai mostrar apenas a parte de baixo daquela imagem, ou seja a parte que não tem nada. Então no hover, já determinamos da seguinte forma:

#menu a:hover { display: inline-block; -webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out; height: 45px; line-height: 45px; background: url(images/menu.png) top center; color: #fff; margin-left: 10px; }

Viu, mudamos o bottom para top que faz com que ao passar o mouse a imagem suba e da aquele efeito que a gente ver subindo.

Entendendo algumas coisas:

O height é 45px mas se não colocassemos o line-height: 45px, o que estaria escrito pegaria apenas a parte de cima, então usando isso deixa alinhado.

Use os paddings de forma com que seu menu fique com espaçamento ideal. E para usar:

Galeraaa, criei um menu muito legal, é um rollover que pisca. Visualize ele aqui. Gostaram? Então vamos lá…

Coloque esse código no seu css, ou seja antes de </style>

@-webkit-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } #menu { margin:1px; width:150px; height:60px; font-family:'Yanone Kaffeesatz'; font-size:30px; color:#COR DO TEXTO; text-align:center; line-height:60px; text-transform:uppercase; background:url('IMAGEM') no-repeat; background-position: 0px -60px; float:left; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; } #menu:hover { color:#COR DO TEXTO HOVER; background-position: 0px -0px; -webkit-animation: pisk .8s alternate infinite linear; -moz-animation: pisk .8s alternate infinite linear; -o-animation: pisk .8s alternate infinite linear; -ms-animation: pisk .8s alternate infinite linear; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; }

Bom, você vai precisar do Ps (Photoshop) pra colocar outra imagem nesse menu okay? Eu fiz aquela do preview e salvei psd, baixe ele aqui e troque as cores e, se quiser aquela imagem mesmo do preview está aqui, daí é só hospedar aqui, copiar a url e colar aonde está escrito ‘IMAGEM’. 

Feito isso, cole esse código aonde quer que apareça o seu menu, os links que estão ali é pra iFrame mas você pode trocar se quiser okay?

<a href="/" id="menu">home</a><a onClick="changeNavigation('ask')" id="menu">ask</a><a onClick="changeNavigation('themes')" id="menu">themes</a><a onClick="changeNavigation('faq')" id="menu">faq</a><a onClick="changeNavigation('materiais') id="menu">extras</a>

E por último a fonte personalizada, cole esse código antes de </head>

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400,700t" rel="stylesheet" type="text/css">

Ei. Bom, mais um menu pra vocês, esse pelo meu ver é algo bem simples, que da pra ser usado de diferentes formas, basta vocês ousarem na hora de mandar para o seu theme. Vou explicar bem, para que não venham depois perguntando como faz isso e como faz aquilo, então por favor, leia com atenção e desculpa se tiver algum erro, eu estou bem depressiva. rs

Veja o menu aqui!

Pra começar, queria dizer que esse menu, é apenas cor uma fonte legal, no caso usei a georgia porque estava sem saco pra procurar uma no googlef. Então ficou deste jeito, você na hora de personalizar pode fazer da forma que quiser, como disse anteriormente. Então, ele tem cor, dai a fonte, um text shadow, pra quem não sabe é sombra. Então eu ousei, usei um transition e ficou algo legal.

Coloque isso antes de </style>:

.simplemenu { cursor: pointer; font-family: Georgia; position: absolute; width: 700px; margin-top: 28px; height: 62px; font-size: 16px; letter-spacing: 1px; overflow: hidden; font-style: italic; margin-left: 90px;}  .simplemenu a { color: #ffcbcb; padding-left: 29px; padding-right: 11px; text-shadow: 0px -100px 1px #94d0cf; padding-top: 58px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;} .simplemenu a:hover { color: transparent; padding-left: 29px; padding-right: 11px; text-shadow: 0px 0px 0px #94d0cf; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;}

Temos a class de posição, que é a class onde fica o position absolute, onde tem também a largura, ou seja, o tamanho do lugar onde meu menu vai ficar. Dai temos um height com um valor legal, você quem sabe se deve ou não aumentar. Coloquei um overflow hidden para que na hora que a sombra vá para fora, ela suma, porque nada vai sair de dentro daquele valor que dei ao height. Então é básicamente isso a primeira class. Temos também a fonte, o tamanho que ela vai ter, e alguns efeitos que quis dar.

Na segunda class, que é o a, eu personalizei. Dei o text-shadow em negativo, fazendo-o subi, ou seja, ele não vai aparecer, apenas no hover, fazendo então que ele desça lentamente. Dei um padding-left para separar cada menu um do outro, isso você pode mudar também. Dei cor ao meu a para que ele não ficasse com a cor dos meus links padrões.

Na terceria que é o a:hover coloquei o text-shadow em 0 e dei a ele uma cor, que no caso é a azul. Não esquecendo do transition, que tem no a sem hover e no a com hover. O transition faz com que o meu elemento ao fazer a troca de cor e o que seja, tenha uma lentidão. Mudado o valor indicado na propriedade dele, você vai obter uma trasição lenta e até uma mais rápida. Bom, é apenas isso.

HTML:

E ae, brow. Vou ensinar como faz o menu que esta no LK e que antes estava no meu tumblr pessoal. Ele é com imagem e tudo mais, então, se você quiser fazer a sua, só fazer. Mas como fazer? Bom, você deve lembrar que eles devem ter o mesmo tamanho, e devem ser transparente. Você deve procurar bases de desenhos para o recorte, para que fique legal. Bom, você pode ver o tamanho que usei nos meus que estão já upados, eu pintei a base de branco e deixei a opacidade em 60. Então, se quer adicionar mais icones, só criar. Aqui tem uma pasta de icons que fiz agorinha para o tutorial. Se usar, credite! :) Bora para o tutorial?!

>> PREVIEW!

Então, vou começar falando sobre o css, cada parte do css vou explicar pra que serve…depois, no final, vou colocar o css inteiro e então é esse que vocês devem usar. Obrigada pela compreensão.

.icons { position: absolute; margin: 8px 0 0 4px; opacity: 0.3; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}

position: absolute >> Define que aquele menu tem que ter uma posição absoluta, ou seja, ele tem que ficar por cima de qualquer coisa que esteja “abaixo” dele.

margin: 8px 0 0 4px >> Define o local onde o menu vai ficar, a posição dele. A primeira númeração é de top para baixo a terceira numeração é left. No hover, mudamos isso para que ele possa andar ao passar o mouse.

opacity: 0.3 >> Opacidade dos icons. trasition: A trasição do hover, a “lentidão”.

.icons a{display: block; margin-top: 6px; opacity: 0.5; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;} .icons a:hover{opacity: 1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;} .icons img {border: none;}

O style acima, é o .icons a, ou seja. Se a gente formatasse isso de uma forma fofa, com nome de fonte, tamanho, cor e etc. Todo linkd dentro da div icons iria ficar com aquela formatação. Mas como usamos imagens, apenas definimos um margin-top, que faz os icons ficarem separadinhos. A opacidade, o display block que faz um ficar acima do outro. E dai temos o hover, com a opacidade com numeração em 1, pra que não sabe, vai ficar normal a imagem. E o trasition, como já falei logo acima. Temos o .icons img com o border none. Pra quem não sabe, algumas iamgens com links em certos navegadores (IE) fica com border, se colocarmos isso, não vai ficar.

.rs:hover .icons { margin: 8px 0 0 174px; opacity: 1; overflow: hidden; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;}

Esse style acima, é o que faz a mágica. Sem ele, os icons não vão ir para o lado, dando esse efeito legal. Lembra do primeiro style que postei? Então, ele não tinha um margin com numeração? Pode ver que a do top continua com 8 e a do left esta com uma numeração maior. Você deve aumentar e deixar o hover até onde você desejar. A imagem que uso tem o tamanho de 200px; então, lembro que meus icons tem tamanhos e defino isso corretamente, para que pare no local desejado. O começo do html, começo com uma div chamada rs, ao passar o mouse sobre ssa div vai dá o hover. Porque note no css acima, é .rs:hover certo? Então, ela tem que me obedecer. OPAMSAPSMAO

.avatar_side {border: 3px solid #fff;}

Borda a imagem, você pode fazer ela como desejar.

HTML:

<!-- começo da div rs --> <div class="rs"> <!-- começo da icons --> <div class="icons"> <a href="URL"> <img src="http://static.tumblr.com/tx5g7yp/k3Smbfvn0/home.png"> </a> <a href="URL"> <img src="http://static.tumblr.com/tx5g7yp/onYmbfvny/askme.png"> </a> <a href="URL"> <img src="http://static.tumblr.com/tx5g7yp/vNxmbfvoz/fotos.png"> </a> <a href="URL"> <img src="http://static.tumblr.com/tx5g7yp/q3smbfvpn/links.png"> </a> <a href="URL"> <img src="http://static.tumblr.com/tx5g7yp/h0ymbfvq0/love.png"> </a> <a href="URL"> <img src="http://static.tumblr.com/tx5g7yp/IvPmbfvqp/twitter.png"> </a> </div> <!-- final da div icons --> <!-- imagem da sidebar--> <img src="http://static.tumblr.com/tx5g7yp/ZLombfwgh/untitled-1.png" width="200" class="avatar_side"> <!-- final da imagem da sidebar--> </div> <!-- final da div rs-->

Entenda o código acima: Nuna retire a div class rs. Cada <a href=“URL”> você deve informar o link, o colocando em url. Dai temos o img que você pode trocar com os icons já feitos ou com os icons que você vai fazer. Bom é isso, qualquer coisa, grita aê que a gente da uma luz. ;*

CSS:

Oi, bom, pra quem não sabe que menu é esse vai ai o preview.

Esse menu não tem muita coisa complicada, é apenas css, então vou tentar explicar algumas coisas e também na parte de ps. Vou começar pelo css principal:

.destaque  { float: right; margin-right: -20px; margin-top: -5px; background: url('http://static.tumblr.com/tx5g7yp/nFYmaau44/bot__o.png'); background-repeat: no-repeat!important; width: 64px; height: 25px;} .boxdestaque:hover .destaque { background-position: -0px -25px;}

Logo acima, temos o .destaque normal, que é o style onde fica nosso botão. Esse botão é feito com imagem, quase igual do do menu rollover.

Note que são duas imagens, certo? Uma com o gradiente mais redondinho e outra com o gradiente parecendo estar fundo. Mas na real, apenas mudei a posição do gradiente. Essa imagem ela é apenas uma, dai eu coloco ela ali na parte do background com imagem, defino a altura de UMA imagem, que no caso é 25px e a largura que é 64px;

Bom, logo acima temos também o .boxdestaque:hover .destaque.

Por que o hover é no .boxdestaque:hover?

Você pode sim tirar aquele .boxdestaque:hover e colocar o hover no .destaque, mas dai só quando passarmos o mouse sobre o botão que vai ter o hover. Como no preview, note que ao passar o mouse sobre o box o botão da o hover.

Por que?

Porque o nosso botãozinho fica DENTRO do boxdestaque. Então ele tem que obedecer o comando que dei para o meu css.

Sobre o style do hover, ali tem um: background-position: -0px; -25px; certo? Como meu primeiro botão tem 25px de altura o de baixo também vai ter isso, então o que fazemos? Colocamos um -25 que vai fazer o botão de baixo subir pra cima, dando o hover correto. Quando digo altura, estou me referindo ao height da imagem.

É basicamente isso a parte style do botão. Então na hora de criar o botão no ps, caso faça outro com uma cor fofa combinando com seu theme, lembre-se de que ele tem um tamanho e altura, defina corretamente que tudo vai dá certo.

.boxdestaque { text-align: left; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin-right: 7px; background: #fff; padding: 5px; margin-bottom: 7px; } .boxdestaque:hover { background: #; text-shadow: 1px  1px 1px #fff;}

O css acima, é o style do nosso box. Você pode mudar a cor do background, deixando-o com a aparencia que você queira. Pode dar mais padding, dependendo da altura do seu botão para que fique fofo.

.boxdestaque .title { color: #999; font-size: 11px; font-weight:none; font-family: Georgia; font-style: italic; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} .boxdestaque:hover .title{ color: #7797a7; padding-left: 15px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}

O css acima, é o style do nosso title, ou seja, o jeito que a escrita do box vai ficar. A cor que vai ter, se vai ter uma fonte personalizada e etc. Se você vai dar uma cor diferente no hover. Temos o transition, que vai faz a fonte mudar de cor lento e vai ela andar >> lento também. Como podem ver no preview.

Bom, é apenas isso. Logo abaixo, vou postar o css e o html de tudo para que vocês possam usar.

CSS:

.destaque  { float: right; margin-right: -20px; margin-top: -5px; background: url('http://static.tumblr.com/tx5g7yp/nFYmaau44/bot__o.png'); background-repeat: no-repeat!important; width: 64px; height: 25px;} .boxdestaque:hover .destaque { background-position: -0px -25px;} .boxdestaque { text-align: left; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin-right: 7px; background: #fff; padding: 5px; margin-bottom: 7px; } .boxdestaque:hover { background: #; text-shadow: 1px  1px 1px #fff;} .boxdestaque .title { color: #999; font-size: 11px; font-weight:none; font-family: Georgia; font-style: italic; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} .boxdestaque:hover .title{ color: #7797a7; padding-left: 15px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}

Coloque isso acima, antes de </style>!

HTML:

<div class="boxdestaque"> <span class="title">Descrição do link <a class="destaque" href="URL"></a> </span> </div> <div class="boxdestaque"> <span class="title">Descrição do link <a class="destaque" href="URL"></a> </span> </div> <div class="boxdestaque"> <span class="title">Descrição do link <a class="destaque" href="URL"></a> </span> </div>

>> PREVIEW!

.simplemenu { text-transform: uppercase; cursor: pointer; font-family: 'Economica', sans-serif; position: absolute; margin-left: 30px; margin-top: 90px;   width: 990px; height: 18px; font-size: 22px; letter-spacing: 1px;}

Text-transform: uppercase: Deixa a fonte em CAPS!

Cursor: Pointer: Deixa a mãozinha, o dedinho ao passar o mouse. Geralmente uso porque tem iframe, dai pra não mudar o cursor é bom usar.

Font-family: Onde defino a fonte que vou usar.

Position: absolute: Meu menu vai ficar por cima do meu header.

Margin-top: 90px: Distancia do topo, ou seja, mude se for preciso, deixando no local onde quiser.

Margin-left: 30px: Distancia <<, ou seja, mude se for preciso, deixando no local onde quiser.

Width: 900px: Definir o tamanho onde meu menu vai ficar, é sempre bom definir tamanhos em tudo.

Height: 18px: Altura do meu menu, também é sempre bom definir.

Font-size: 22px: Tamanho da escrita do meu menu, pode aumentar ou diminuir se quiser.

Letter-spacing: 1px: Espaçamento de cada letra, aumente o valor e veja como funciona. Pode usar em negtivo também. Então seria o -1px; que dai elas meio que grudam.

Bom, essa é a parte onde nosso menu fica, ou seja:

<div class="simplemenu"> menu </div>

Logo a seguir, vamos personalizar nosso a, ou seja, todo link dentro da div simplemenu vai ficar com aquela personalização.

Personalizando os links do nosso simplemenu:

.simplemenu a { color: #61536a; padding-left: 20px; padding-right: 11px; text-shadow: 0px 1px 1px #000; padding-top: 5px; padding-bottom: 5px; background: url('http://static.tumblr.com/tx5g7yp/rUxma6rxl/rs.png') no-repeat; background-position: 0px 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;}

Bom, nada de muito complicado. Ali temos a cor, o padding-left com valor. Esse padding left é pra deixar a escrita longe do back, ou seja. Você faz uma bolinha ou coração e coloca ali no link de backgrund, dai aquela imagem tem o tamanho de 20px então a gente dá 23px para o padding left, que a escrita não vai ficar por cima. Usamos também o padding-right, para que nada fique errado. Logo abaixo, temos o text-shadow, que é a sombra que fica abaixo do nosso menu. Eu definir o top e o sombreamento, sim aqueles 1 ali são top e sombreamento. Ou seja, aumente os valores e veja como fica. Tire o primeiro um, colocando o 0, aumente o outro 1 e veja como funciona. O 0 que fica primeiro, é o left, se mexer a sombra vai >> se quiser, tudo bem. Ainda tem text-shadow (sombrinha no texto) pode ver que tem um #000; certo? Aquilo é a cor, ou seja, você pode colocar ali a cor que quiser. Entre #códigodacor;

Bom, já postei a persoalização do nosso menu, sem passar o mouse ele vai ficar da forma que você ver no preview.

Hora do hover:

.simplemenu a:hover { color: transparent; padding-left: 20px; padding-right: 11px; text-shadow: 0px 11px 0px #1d1718; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.s ease;}

Bom, no hover é o seguinte. No color eu deixei em transparent, ou seja, ao passar o mouse a cor vai sumir porque não tem uma cor espessifica. fazendo com que a sombra desça e dando o efeito que vocês viram. Temos o padding-left e right com o mesmo valor e logo a seguir, tem o text-shadow. Repare que usei a sombra "top" Lembra que eu disse? Então, dei um valor grande e dai no hover a sombra vai descer. Como eu disse como o text-shadow funciona, vocês já devem  ter entendido.

No link normal e no hover, eu usei um trasition, que é o que faz o negocio ficar lento, dando um efeito legal e tudo mais.

Bom, é só isso. Essa é a parte do css, você deve colocar antes de </style>:

/* ------- Menu just disappearing por TTHY  ---- */ .simplemenu {text-transform: uppercase; cursor: pointer; font-family: 'Economica', sans-serif; position: absolute; margin-left: 30px; margin-top: 90px;  width: 900px; height: 18px; font-size: 22px; letter-spacing: 1px;} .simplemenu a {color: #61536a; padding-left: 20px; padding-right: 11px; text-shadow: 0px 1px 1px #000; padding-top: 5px; padding-bottom: 5px; background: url('http://static.tumblr.com/tx5g7yp/rUxma6rxl/rs.png') no-repeat; background-position: 0px 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;} .simplemenu a:hover {color: transparent; padding-left: 20px; padding-right: 11px; text-shadow: 0px 11px 0px #1d1718;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.s ease;}

Deves colocar o html no seu header, usando a div simplemenu, que a div de posição você pode deixar onde quiser. Lembre-se dos valores, margins e etc:

<div class="simplemenu"> <a href="/">Home</a> <a href="/">Dúvidas</a> <a href="/">Tutoriais</a> <a href="/">F.A.Q</a> <a href="/">Themes</a> <a href="/">Materiais</a> <a href="/">About</a> <a href="/">Dicas</a> <a  onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('leia').innerHTML" title=":)">Iframe</a> </div>

O último menu, eu deixei já com o iframe, e ele pega sim okay. A fonte que usei no menu foi a que postarei logo abaixo, você deve por ela antes de </head>:

Oi amores, hoje vou ensinar a fazer o menu do HT, esse que fica no topo, que tem abas, ele é o menu Drop Down, mas de uma outra forma :o *preview* Bom, vamos lá…

Mini dica: Você precisa de uma faixa, a que vai ficar no fundo. Ela precisa ser da mesma cor que vai ficar no balão. Mas se a sua faixinha tiver duas linhas, você pode ficar a vontade para colocar cor diferente no drop down. 

O CSS do menu ficará assim:

/* Drop Down - Hamide Falcão */ .cima{ height: 30px; position: absolute; top: -5px; ; display: block; z-index:100;text-align:right; margin-left: -18px; font-family: }

Entendo alguns valores:

Esse código “.cima” é da Bruna, ela que colocou para o menu ficar combinando com a faixa de fundo que ela fez, e eu acho que seria melhor para vocês trabalharem, então adicionei essa div no código.

Height: É para definir a caixinha do titulo dos menus, as que ficam expostas. Eu coloquei o valor de 30 pixels. Mas você pode aumentar ou diminuir, vai do valor da sua faixa de fundo.

Top: Eu coloquei -5px, ou seja, o valor é negativo. É para a caixa dos menus ficarem dentro da faixa, mas se você quiser mudar, fica a seu criterio também, você que sabe.

Margin-left: É o valor -18, quanto mais você aumentar ou diminuir o valor vai ir para um lado. Se você aumentar vai ir para o lado direito, se você diminuir vai para o lado esquerdo.

Continuando…

#navbar {list-style: none; float: left; width: 585px; padding-left:50px; height:100px; line-height: 35px; margin-top: 2px;}

A width é um tamanho que eu defini para ficar certo na minha tela o menu, você pode aumentar de acordo com a quantidade de abas que ficará no seu menu.

A height é um tamanho que eu defini também, mas você pode aumentar, porém eu não acho que ficará legal, enfim, vai de você!

Logo em seguida, coloque isso:

#navbar li {list-style: none; font-family : georgia; font-style: italic; float: left; vertical-align:middle;} #navbar li a {display: block; text-align: center; font-size: 12px; padding-left: 6px; padding-right: 6px; font-family : georgia; font-style: italic; margin-left:6px; margin-right:6px; text-decoration: none; color: #9DA2A8;  -webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear; -o-transition: background-color 0.2s linear;}

Desse código acima “#navbar li a” você só precisa modificar a cor, a font-size e a font-family, se você mudar o resto dos códigos vai ficar desconfigurado o menu.

#navbar li a:hover {background:#334256; text-shadow: 1px 1px 0 #2d3b4d; border-bottom:0; color: #ececdc;} #navbar li ul {display:none; padding:0; width:auto; height:30px; line-height:30px; margin-left: -40px; background:#334256; -moz-border-radius:0px 0px 8px 8px; -webkit-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px; margin-top: 2px}

Nos códigos acima a mesma coisa, você só precisa mudar a cor do background para ficar na cor da sua faixa de fundo e no segundo código “#navbar li ul” você precisa mudar a cor do background e o valor do border-radius.

#navbar li:hover ul, #navbar li.hover ul {position: absolute; display: inline; padding-left:5px; margin-left: -60px; padding-right:5px; border-bottom:0; -webkit-transition: background-color .2s ease; } #navbar li:hover li, #navbar li.hover li {float: left; margin-top:1px; border-bottom:0; color: #ececdc} #navbar li:hover, #navbar li:hover a {background:#334256;  border-bottom:0; margin-top: 1px;} #navbar li:hover li a {color: #767b82; -webkit-transition: background-color .2s ease; border-bottom:0;} #navbar li li a:hover {color: #ececdc; border-bottom:0;}

Nos códigos acima a mesma coisa gente.

No geral o que vocês mais precisam mudar é o valor da width e height, background, color e a border-radius.

No final os códigos ficaram assim:

/* Drop Down - Hamide Falcão */ #navbar {list-style: none; float: left; width: 585px; padding-left:50px; height:100px; line-height: 35px; margin-top: 2px;} #navbar li {list-style: none; font-family : georgia; font-style: italic; float: left; vertical-align:middle;} #navbar li a {display: block; text-align: center; font-size: 12px; padding-left: 6px; padding-right: 6px; font-family : georgia; font-style: italic; margin-left:6px; margin-right:6px; text-decoration: none; color: #9DA2A8;  -webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear; -o-transition: background-color 0.2s linear;} #navbar li a:hover {background:#334256;text-shadow: 1px 1px 0 #2d3b4d; border-bottom:0; color: #ececdc;} #navbar li ul {display:none; padding:0; width:auto; height:30px; line-height:30px; margin-left: -40px; background:#334256; -moz-border-radius:0px 0px 8px 8px; -webkit-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px; margin-top: 2px} #navbar li:hover ul, #navbar li.hover ul {position: absolute; display: inline; padding-left:5px; margin-left: -60px; padding-right:5px; border-bottom:0; -webkit-transition: background-color .2s ease;} #navbar li:hover li, #navbar li.hover li {float: left; margin-top:1px; border-bottom:0; color: #ececdc} #navbar li:hover, #navbar li:hover a {background:#334256;  border-bottom:0; margin-top: 1px;} #navbar li:hover li a {color: #767b82; -webkit-transition: background-color .2s ease; border-bottom:0;} #navbar li li a:hover {color: #ececdc; border-bottom:0;}

Não sei se soube explicar direitinho, mas enfim.. Espero que tenham entendido algo, qualquer dificuldade por favor me procurem na ask.

O Iframe ficará da seguinte forma:

<div class="faixinha"></div> <div class="cima"> <ul id="navbar"> <li><a href="/">home</a><li> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('sobre').innerHTML">sobre</a></li> <li><a>contato</a><ul> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('ask').innerHTML">ask</a></li> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('submit').innerHTML">submit</a></li></ul></li> <li><a>mais links</a><ul> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('PAGINA IFRAME').innerHTML">link</a></li> <li><a href="#" span onClick="document.getElementById('liuc') .innerHTML=document.getElementById('PAGINA IFRAME').innerHTML">link</a></li></ul></li> </ul> </div></div></div>

*Faixinha: A div da faixinha pode ser assim:

Nuvem de tags é nada mais nada menos que uma pagina com TODAS as tags do seu tumblr, tipo, todas! E para você colocar é só seguir o tutorial ♥

Crie uma page/página, se você não sabe como criar é assim:

Vá no eu customize » Add page » Depois da URL do seu tumblr na primeira caixinha você vai colocar “tag” ou o que você quiser, NÃO FECHE A ABA E NEM CLIQUE EM CREATE PAGE, depois você vai seguir estes passos:

Vai entrar neste site;

Vai colocar a URL do seu tumblr;

E depois para personalizar a sua nuvem, você seguirá estes passos

Em Limit você vai colocar quantas aparições de tags você deseja que apareça; Em Order você pode escolher em deixa-las na ordem alfabética ou não; Em CSS você pode escolher a opção “flickr-esque”, ai as tags vão ficar girando *muito show, mas se não quiser deixe a primeira opção*;

Clique em Refresh preview e veja como ficará a sua nuvem de tag, se estiver do jeito que você quer e/ou gostou, é só copiar o códio daquela caixinha do lado direito e vai seguir os seguintes passos:

Menu escondido, veja o Preview aqui. 

Esse é o menu do meu theme, então, por favor, creditem, não custa nada. :) 

Vamos ao CSS. 

01 - Posicionando o Sidebar, e a caixa do side. 

#sidebar {width:230px;font-family:Arial, ‘Helvetica Neue’, Helvetica, sans-serif; font-size:10px;  color:#777;margin-top:-2px;margin-left: 42px;float: center;text-align: justify; position: fixed ;padding: 3px;background: ;z-index: 100px; z-index:100; background: url('http://static.tumblr.com/8buytvw/eRDmetux4/gray_jean.png’) fixed; }

.cx {background:#ffffff ;margin-bottom:-1px;text-align: justify; width:224px; height: 130px ; z-index:100;border: 0px solid #eee;padding: 3px;margin-top:-2px; }

Ps: O Sidebar esta com o mesmo Background que o theme, pra ficar ficar tudo igualzinho, quem já viu meu theme, sabe como é, se não quiser o BG, basta retirar o o link do bg. 

A .cx é ondeesta a descrição, deve ser definido os valores do width e height. O Menu deve ficar escondido por trás do Sidebar (caixa) . Usando o z-index você consegue fazer isso. 

02 - Posicionando o Menu por trás do Sidebar. 

.sidebarmenu { margin-top:207px;margin-left: 43px; position: fixed ; z-index: 50px; height:auto;-webkit-transition-duration: .60s; }

.sidebarmenu:hover { margin-top:290px; -webkit-transition-duration: .60s; }

Ps: Você deve definir o margin-top do seu menu, de acordo com o tamanho das imgs que você usar, no meu caso, usei esses valores, porque posicionei de acordo com o tamanho das pngs do meu menu. 

03 - Colocando as PNGs do menu.

Vou fazer o exemplo de 02 posicionamentos. 

#nav .home {overflow: hidden; background: url(link da img) no-repeat;display: inline-block; width: 40px;height: 120px;-webkit-transition-duration: .50s; }

#nav .home:hover { background-position: 00px -80px;}

#nav .ask {overflow: hidden; background: url(link da img) no-repeat;display: inline-block; width: 40px;height: 120px;-webkit-transition-duration: .50s; }

#nav .ask:hover {background-position: 00px -80px ;}

Ps: De novo, os valores, width, height, e do hover serão definidos de acordo com o tamanho da img do seu menu. 

04 - Posicionando o Menu, depois de <body> 

Ps: Você pode colocar o iframe do mesmo jeito. Se tem duvidas siga este tutorial 

05 - Posicionando o Sidebar. 

“Eu preciso muito deixar acontecer o momento da renovação, trocar de pele, mudar de cor. Tenho sentido necessidades do novo, não importa o quê, mais que seja novo, nem que sejam os problemas. Preciso deixar a casa vazia para receber a nova mobília. Fazer a faxina da mente, da alma, do corpo e do coração. Demolir as ruínas e construir qualquer coisa nova, quem sabe um castelo”

Caio F. Abreu.

Prontinho, o menu esta pronto, lembre-se de redefinir os valores, qualquer duvida pode ir na ask | Substitua as aspas (“ ”)

Vou tentar ensinar de um jeito bem simples. Primeiro você faz as imagens no Photoshop, o menu completo bem alinhado. 

Assim, um em baixo do outro, essa png possui, width: 97px;height: 74px, para fazer o efeito, use a metade do valor do Height, e no hover use a diferença, para que o menu suba (ou desça se preferir). Vamos os códigos. 

No CSS, defina o lugar onde vai ficar o seu menu. 

.sidebarmenu { top: 300px;margin-left: 70px; position: absolute ; z-index: 50px; height:auto; width:600px;}

Logo em seguida, faça os códigos do Menu e Transição. (vou fazer um exemplo com o esse Home) 

#nav a.home {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/A05mjw1bf/home.png) no-repeat;-webkit-transition-duration: .50s;-moz-transition:  50s; -o-transition: 50s; display: inline-block; width: 97px;height: 35px; margin-left:-2px;} #nav a.home:hover{background-position: -0px -39px;} 

Observe que na id do menu home, usamos no height: 35px e no hover o que sobrou para 74, que é -39px. 

o resto do menu, ficaria :

#nav a.ask {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/M8Nmjw1bm/inbox.png) no-repeat; display: inline-block; width: 95px;height: 35px;-webkit-transition-duration: .50s; -moz-transition:  50s; -o-transition: 50s; margin-left:16px;} #nav a.ask:hover{background-position: -0px -39px;}

#nav a.themes {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/iacmjw1n7/themes.png) no-repeat; display: inline-block; width: 137px;height: 35px;-webkit-transition-duration: .50s;-moz-transition:  50s; -o-transition: 50s; margin-left:16px;} #nav a.themes:hover{background-position: -0px -39px;}

#nav a.extras {overflow: hidden; background: url(http://static.tumblr.com/8buytvw/aodmjw1q7/extras.png) no-repeat; display: inline-block; width: 124px;height: 35px;-webkit-transition-duration: .50s; -moz-transition:  50s; -o-transition: 50s; margin-left:16px;} #nav a.extras:hover{background-position: -0px -39px;}

O depois de <body>, logo depois da sua id da page. Seu link para o menu, vai ficar assim.

<div class=‘sidebarmenu’> <div id='nav’>

<a class=“home” href=“/”></a>

<a class=“ask” href=“#” span onClick=“document.getElementById('liuc’) .innerHTML=document.getElementById('askht’).innerHTML”  ></span></a>

<a class=“themes” href=“#” span onClick=“document.getElementById('liuc’) .innerHTML=document.getElementById('themesht’).innerHTML”  ></span></a>

<a class=“extras” href=“#” span onClick=“document.getElementById('liuc’) .innerHTML=document.getElementById('extrasht’).innerHTML”  ></span></a>

</div></div>

Serviu, credite e de um like! 

Bom, muitos seguidores vem na ask perguntar como fazemos o efeito de digitação na aba de navegação quando abrem o HT, bom, é muito simples você aplicar este efeito no seu tumblr, basta seguir os passos:

Procure por </head> e cole isso antes:

<script src="http://static.tumblr.com/hqb6dzr/Kejmhinhq/dig.js"></script>

Esse efeito é para tumblr pessoal, ok?

Exemplos dos efeitos que irei ensinar.

Efeito 1:

Coloque isso antes da tag </head>:

<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>

Agora coloque esses códigos antes da tag </style> .

No Html do seu theme (depois de <body>), coloque isso.

Você só vai precisar mudar as imagens, links e o nome da parceria.

Obs: As imagens que utilizei tem o tamanho fixo de 48x48px por tanto, se caso for fazer os avatares, faça desse tamanho ou um pouco maior, o que você achar melhor!

_x_

Efeito 2:

Coloque isso no seu theme, antes de </head>

<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/2wl9p6g/G70lj5t0q/animatedcollapse.js"></script> <script type="text/javascript"> animatedcollapse.addDiv('jason', 'fade=1,height=80px') animatedcollapse.addDiv('kelly', 'fade=1,height=100px') animatedcollapse.addDiv('michael', 'fade=1,height=120px') animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets') animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1') animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1') animatedcollapse.ontoggle=function($, divobj, state) { //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state } animatedcollapse.init() </script>

Agora coloque esses códigos antes da tag </style> no seu theme.

Coloque a caixinha do Ask.fm em seu tumblr, blogs e etc. Vá em, Configurações > Widget

  Quando passar a mouse na foto a descrição vai aparecer. 

Primeiro passo -  Cole isso no seu CSS 

#sidebar {width:230px; color:#777;margin-top:-5px;margin-left: 05px;float: center;text-align: justify; position: fixed ; z-index: 100px;font-family:calibri; font-size:11px;}

.caixa {background:#ffffff ;margin-bottom:5px;padding: 5px;text-align: justify;width:245px;z-index:100;border: 1px solid #eee}

#show {margin-left: 260px;  margin-top:15px; overflow:hidden; -webkit-transition-duration: .90s;position:absolute;float:left; display:block; }

.pic { z-index: 1;overflow: hidden;position:absolute; width:250px; height:auto ;padding:5px}

.pic:hover #show {margin-top:15px; margin-left: 15px;}

#descri {background: #fff;display: inline-block; text-align: center; color:#848484;  float: center; margin-bottom:1px ; padding:2px;   height:auto; width:220px;  -webkit-transition-duration: .70s;font-family:calibri; font-size:11px;padding-top:5px;opacity: 0.8;}

Segundo passo - Cole isso depois da tag <body> ou <body onkeydown=“return false”>

<div id=“sidebar”><div class=“pic”><div id=“show”>

<div id=“descri”>{block:Description}{Description}{/block:Description} </div> </div>

<div class=“caixa”>

<center><img src=“http://static.tumblr.com/8buytvw/rQumbmppt/6.gif” width=“240” style=“padding: 2px;” ></center> 

Descrição Hover Marshmallow soufflé oat cake. Cupcake sweet gummi bears wafer tootsie roll wypas cupcake. Pie cotton candy chocolate gummies toffee wypas lollipop. Toffee tart caramels.

</div>

Vamos aprender este tipo de Footer! 

Certo, primeiro antes de fazer esse footer, vamos lembrar as div’s de um theme completo?

#page #header #sidebar #conteudo #footer,  e agora vamos aprender o Infinity Footer (#ifooter), chamo assim porque o conceito dele é praticamente igual a de uma cortina, ou barrinha, ele é infinito, você só vai criar as div’s dentro dele! 

Conte todas as div’s, não pode ter nem uma ‘a mais’ nem 'a menos’ tem que ser tudo certinho, caso contrario o footer não funcionará. 

Faça a ID no seu CSS: (Vou colocar a minha, vai usar? CREDITE!)  

#ifooter {background:  url(’ link da Png’) repeat-x scroll left;height:445px; position: absolute; left: 0; display: block; width:100%;z-index:0;clear: both!important;}

Height (altura) - você pode mudar, pra mim, quanto mais alto, mais bonito! rs

Width (largura) - 100%, no caso infinito. 

Cuidado na hora de fazer a PNG do footer, lembre-se que ela vai repetir, não precisa fazer muito grande. E cuidado com os detalhes dessa imagem, pra não ficar errado quando repetir. 

Onde colocar a Id?  Deve-se colocar a ID depois do Footer, vai ficar assim: 

<div id=“footer”></div>

</div>  

<div id=“ifooter”>    

Aqui dentro você vai criar as div’s

</div>

Passo dois - Criando as div’s para o ifooter. 

Sabe quando criamos o sidebar, e vamos fazer as caixinhas? pra colocar o conteúdo  então é quase a mesma coisa! 

No CSS, crie a class das caixas. 

.cx1 {margin-top: 15px; margin-left: 60px;  width: 240px; position: absolute;}

.cx2 {margin-top: 15px; margin-left: 310px; width: 240px; position: absolute;}

.cx3 {margin-top: 15px; margin-left: 620px; width: 240px; position: absolute;}

São 03 caixinhas, você pode fazer quantas quiser, e definir a Altura e Largura se precisar!  Depois disso, vai ficar assim.   <div id=“ifooter”>    

<div class=“cx1”> Conteudo </div>

<div class=“cx2”> Conteudo </div> <div class=“cx2”> Conteudo </div> 

Nesse tutorial você vai aprender a montar o Switch Menu para seu Tumblr, Blog e Afins. 

Pra quem não conhece, para aparecer o conteúdo, basta clicar no assunto desejado.

Primeiro passo -  Antes de </head> Cole isso aqui lá.

Segundo passo -  Crie os botões no seu CSS, do jeito que você quiser, vou colocar o meu, se usar, credite ok? não custa nada! 

/**Menu - Endstonight|Tumblr**/  .menutitle{color: #387377; font-family: ‘Yanone Kaffeesatz’, georgia;  font-size:16px; line-height:28px; font-weight:normal; padding:5px; margin-bottom:8px; text-align: left; letter-spacing:1px; background: #f0f0f0;text-indent : 10px;-webkit-transition-duration: .40s;} .menutitle:hover{text-indent : 19px;}

( PS: Link da Font  - <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz’ rel='stylesheet’ type='text/css’>

cole antes de </head> )

Terceiro Passo -   Faça o iframe comum no seu menu, e depois monte ele, mais ou menos assim: 

<div id=“tutos” style=“display:none”>

<div class=“box”><h2>Tutoriais</h2>

<div id=“topdiv”>

<div class=“menutitle” onclick=“SwitchMenu('sub1’)” style=“cursor:pointer” >Menus</div>

<span class=“submenu” id=“sub1”>

Conteudoo

</span>  

  Obs: Se você for fazer outros menus, basta substituir o sub1 por  "sub2" , "sub3" , "sub4", você pode fazer quantos quiser.