cherrysource:
“ 🍑 ᴘʟᴇᴀsᴇ, ʟɪᴋᴇ ᴏʀ ʀᴇʙʟᴏɢ ɪғ ʏᴏᴜ sᴀᴠᴇ, ᴅᴏɴ'ᴛ ʀᴇᴘᴏsᴛ!
”

cherrysource:

🍑 ᴘʟᴇᴀsᴇ, ʟɪᴋᴇ ᴏʀ ʀᴇʙʟᴏɢ ɪғ ʏᴏᴜ sᴀᴠᴇ, ᴅᴏɴ'ᴛ ʀᴇᴘᴏsᴛ!

4205

Header Black Sweet:

Visualize aqui [xxx]

1) Cole o seguinte código antes de </head> :

<link href="https://fonts.googleapis.com/css?family=Graduate|Mr+Dafoe" rel="stylesheet">

** Esse é o código da fonte que aparece no exemplo, caso não queira essa fonte, não precisa colocar.

2) Cole esse código no seu css:

/**** HEADER BY BRIDA BRAGA (@agridoceja), DISPONIBILIZADO POR PASSO HTML  ****/

#header {margin-top:-10px; margin-left:-10px; width:100%; height:75px; position:justify; background:{color:Background Header}; padding:25px;}

#fotoheader {width:90px; border-radius:100%; margin-top:-10px; margin-left:30px;}

.titulo {font-family: 'Mr Dafoe', cursive; font-size:35px; color:{color:Titulo Header}; margin-left:110px; margin-top:-75px;}

.subtitulo {font-family: 'Graduate', cursive; font-size:11px; text-transform:uppercase; margin-top: -7px; margin-left:40px; color:{color:Sub Header};}

/**** MENU HEADER *****/

.menu {font-family: 'Graduate', cursive; margin-top:-30px; margin-left:-60px; text-align:center; float:center; color:{color:Cor do menu}; font-size:15px;}

.menu a {color:{color:Texts};}

.menu a {padding-left:4px; padding-right:4px; display:inline-block; text-transform:uppercase; -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out;}

.menu a:hover{color: {color:Cor do menu hover}; -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out;}
/**** FIM HEADER, NÃO RETIREM OS CRÉDITOS! ****/

3) Agora cole o seguinte código depois de <body>:

<!-- HEADER BY BRIDA BRAGA (agridoceja), DISPONIBILIZADO POR PASSO HTML --->
<div id="header">

<!-- FOTO DO HEADER --->
<img id="fotoheader" src="{image:Imagem Header}" />

<!-- TITULO E SUB DO HEADER --->
<div class="titulo">{title}

<div class="subtitulo">{text:sub title}</div></div>

<!-- MENU HEADER --->

<div class="menu">
<a href="{text:link 1 url}">{text:link 1}</a>
 
<a href="{text:link 2 url}">{text:link 2}</a>
 
<a href="{text:link 3 url}">{text:link 3}</a>

<a href="{text:link 4 url}">{text:link 4}</a>
 
<a href="{text:link 5 url}">{text:link 5}</a>

</div></div>

<!-- FIM DO MENU HEADER, NÃO RETIREM OS CRÉDITOS! --->

OBS: as parte em negrito é onde vocês precisam alterar, que no mais são as cores, textos, background, link da imagem, nome e link do menu. Caso quira outro estilo de menu, é só apagar o código do menu e colocar o que desejar.

Qualquer dúvida: ask.

Não retirem os créditos e se usarem de like ou reblog.

| Bri |

Header do twitter

Conforme pedido por @glossdoll, nesse dia aqui, aí está o header do twitter… Observação: Os icons são da fonte Awesome, e não tem o logotipo do twitter por motivos óbvios…

Coles depois de <head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Cole isso antes de </style>

header {
    position:fixed;
    z-index:99;
    left:0;
    top:0;
    background:#fff;
    width:100%;
    height:38px;
    padding:5px;
    font-family:Arial;
    -webkit-box-shadow: 1px 2px 1px 1px #e6e6e6;
    box-shadow: 1px 2px 1px 1px #e6e6e6;
}
header .nav {
    margin-top:3px;
}
header .nav {
    list-style:none;
    display:inline-block;
}
header .nav a { 
    text-decoration:none;
    padding:5px;
    margin:0 4px;
    display:inline-block;
    color:#667580;
    font-size:13px;
    padding-bottom:8.5px;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
header .nav a:hover {
    color:pink;
    border-bottom:4px solid;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
header .nav i { 
    font-size:22px;   
    display:inline-block;
    margin-right:5px;
    top:1px;
    position:relative;
}
.posit {
    margin:0 auto;
width:1100px;
}
.follow {
    background:pink;
    padding:7px 20px;
    border-radius:3px;
    display:inline-block;
    text-decoration:none;
    color:#fff;
    border:1px solid pink;
    float:right;
    margin-top:-41px;
}
.follow i {
    font-size:19px;   
    display:inline-block;
    margin-right:5px;
    top:0px;
    position:relative;
}
.follow:hover {
    border:1px solid pink;
    color:pink;
    background:transparent;
}
.profile {
    width:34px;
    height:34px;
    border-radius:5px;
    border:1px solid #eee;
    float:right;
    margin-right:110px;
    display:inline-block;
    margin-top:-42px;
}
.sform input {
    outline:none; 
    border:none; 
    border-radius:13px;
    width:190px;
    top:7px;
    float:right; 
    margin-left:720px;
    padding:8px 15px;
    text-transform:lowercase; 
    background:#fbfbfb;
    border:1px solid #eee;
    position:absolute;
    color:#999;
}
.sbox {-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; transition:all 0.3s ease-out; color:pink;}
.sbox:hover { color:pink; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; transition:all 0.3s ease-out; }

Cole isso depois de <body>

<header>
    <div class="posit">
    <div class="nav">        <a href="/" style="border-bottom:4px solid pink;" ><i class="fa fa-home" aria-hidden="true"></i>Início</a>
        <a href="/"><i class="fa fa-bolt" aria-hidden="true"></i>Moments</a>
         <a href="/"><i class="fa fa-bell" aria-hidden="true"></i>Notificações</a>
         <a href="/"><i class="fa fa-envelope" aria-hidden="true"></i>Mensagens</a>    </div>    <div class="right">
                <a href="/" class="follow"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Follow</a>
                <img src="https://64.media.tumblr.com/avatar_fda4da6f692c_96.png" class="profile" >
    </div>
           <div class="search">
    <form action="/search" method="get" class="sform" name="form">
    <input type="text" name="q" value="{SearchQuery}" class="sbox"               placeholder="{lang:Search}"/></form></div>
    </div>
    </div>
</header>

Dê like/reblog se usar/gostar.

//Carol, @amplamente

Pergunta feita por Anônimo

c*mo fazer o header ocupar o espaço completo da tela. Somente quando rolar a página, aparecer as postagens?

Cole o código abaixo ANTES de {/style}:

#header{
width: 100%;
height: 100vh;
background: url(’URL DA IMAGEM AQUI’) no-repeat center fixed;
background-size: auto;}

Agora cole o código abaixo, logo DEPOIS de {body}:

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

Algumas observações importantes: Se você não quer que seu header fique fixo, apague “fixed” do código. Caso queria que a imagem alcance as extremidades da tela, troque “auto” por “100% 100%”, porém, tenha em mente que dependendo do tamanho da imagem/monitor, ela ficará distorcida.

/Igor

Como fazer esse header “torto”

Cole isso antes de </style>

#header {
border-bottom:1px solid #dfdfdf;
width:100%;
height:130px;
padding:30px;
background:#fff;
position:relative;
left:-15px;
top:-50px;
margin-top:0px;
margin-left:0px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}#disposition {
margin-top:0px;
height:140px;
width:570px;
margin-left:200px;
background:transparent;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

Cole isso antes de </body>

<div id="header">
<div id="disposition">conteúdo aqui</div>
</div>

Se você quiser que o header fique fixado (não rolar), só é você trocar relative por fixed.

Dê like ou reblog se usar, like or reblog if using.

/Carol