Nostalgia! + Headers

Hey, ladies and gentleman!

Mil perdões pela demora de postar, acontece que eu ando tendo uns ataques de nostalgia e sentimentalismo. É chato, mas o ano já está acabando e eu ainda não fiz metade das coisas que eu deveria: dar um jeito na minha vida, tomar coragem pra me declarar pra mesma pessoa que estou apaixonado desde o inicio do ano, arrumar um emprego, mudar meu gosto musical, terminar de ler a lista de livros que tenho, passar de ano. OK, essa última é exagero! dsjkhdskj. Mas, então, me sinto decepcionado com isso. É um daqueles momentos que você deseja voltar no tempo e fazer tudo, desta vez diferente, mas sabe que não consegue e fica decepcionado consigo mesmo. OK, ninguém me entende.

Eu estava vendo as minhas postagens antigas aqui, e percebi uma coisa: Foi apenas um ano, mas eu mudei tanto assim? Meu jeito de escrever, de falar com vocês de certo modo... Eu sinto falta de antes, sinto falta do + Dreams (o nome de blog mais criativo que eu consegui inventar). Agora eu percebo que de certo modo, eu me tornei alguém que não sou. E vou fazer de tudo pra mudar isso. Só preciso arrumar minhas próximas surpresas! Mudando de assunto. Hoje eu vou postar algo especial que eu nunca vi ninguém postando: headers. Eu sei o que estão pensando. Mas não são headers comuns, são headers em CSS/HTML, detalhados e/ou simples, ao todo são três. Espero que gostem! ♥

Antes de tudo, aconselho que façam backup do seu modelo atual (acho que todos sabem como fazer isso, se não souberem, perguntem e eu explicarei), os dois primeiros serão bem simples, mecherão apenas com CSS, mas à partir do terceiro, iremos fazer alterações no HTML do template. Não é algo tão complicado assim, então, espero que gostem!

Perdoem os exemplos, eu apliquei no meu antigo blog, ou no que restou dele.

Eu não preciso explicar muito sobre estes dois primeiros, ambos podem ser editados diretamente no código CSS (eu deixarei as instruções para vocês), mudem as cores, fontes e tudo mais se preferirem. Para aplicar estes, procure por "/* Header", apague tudo o que estiver abaixo disso e substitua pelo código do blockquote abaixo.

.header-inner {
text-align: right; /*--- alinhe à direita ou à esquerda --- */
padding-right: 20px; /*--- esta parte é de acordo com a de cima, se você colocou left, ponha left aqui também --- */
margin-top: -20px; /*--- altura do header --- */
}

.Header h1 {
font-family: Georgia; /*--- fonte --- */
font-size: 60px; /*--- tamanho --- */
font-style: italic; /*--- estilo --- */
font-weight: normal; /*--- não mecha --- */
color: #f0e7f2; /*--- cor --- */
text-transform: lowercase;
text-shadow: 0px 0px 6px #ffffff, -2px 2px 0px rgba(239, 60, 54, 0.5); /*--- sombra do texto, edite como preferir --- */
}

.Header h1 a {
color: #f0e7f2; /*--- ponha a mesma cor da primeira --- */
text-decoration: none;
}

.Header .description {
margin-top: -10px;
padding-right: 12px; /*--- mude right pela direção do texto --- */
font-family: Georgia; /*--- fonte --- */
font-size: 12px; /*--- tamanho --- */
font-style: italic; /*--- estilo --- */
font-weight: normal;
color: #666; /*--- cor --- */
text-transform: lowercase;
}

@font-face {
font-family: "Curse";
src: url('http://static.tumblr.com/cik74mt/8Rimww3l0/curse.ttf');
}

.header-inner {
text-align: center;
margin-top: -20px;
}

.Header h1 {
padding-bottom: -14px;
padding-left: 50px;
padding-right: 50x;
font-family: Curse;
font-size: 50px;
font-weight: normal;
color: #666;
text-transform: lowercase;
border-bottom: 1px dotted #ccc;
}

.Header h1 a {
color: #666;
text-decoration: none;
}

.Header .description {
font-family: Calibri;
font-size: 11px;
color: #666;
text-transform: uppercase;
}

Então, é isso! kdjshdkjs. Eu fiz outro, bem mais complicado e por isso não irei posta-lo agora, já que eu precisaria de uma postagem inteira e um tutorial sobre mexer no HTML do template, então deixarei para a próxima postagem. XOXO