#cabecalho

[limiteeuropeu]

Trabalho de História

Educandário Almir Morais

Educando: Lucas Edington dos Santos

Educador: Zunara

Disciplina: História

Turma: 7º ano

Tema: Limite Europeu

[htmluv]

Estilo de Cabeçalho #03

A muito tempo atrás, direto do túnel do tempo, eu usei ele nesse theme (sdds silly-love-poems). Dai o João me lembrou dele e pediu para eu fazer o tutorial, como eu sou uma pessoa muito boa vou fazer u_u

~Preview~

Primeiro coloca isso no teu css:

.bar div {color: #c9c9c9;overflow: hidden; white-space: nowrap;  padding:5px; animation: progress-bar 4;-webkit-animation: progress-bar 4s; -moz-animation: progress-bar 4s; text-align: center; margin-top:2px; text-transform:uppercase; font-family: Verdana, Geneva, sans-serif; font-size:14px; box-shadow:inset 0px 0px 10px #ccc; outline-offset: -3px; outline:1px dashed #fff; border-radius:5px;}@-webkit-keyframes progress-bar {0% { width: 0;}} @-moz-keyframes progress-bar {0% { width: 0; }}

Por favor não apague nada se não deforma!

E quando for usar usa isso:

<center><div class="bar"><div style="width: 95%; background:#f7f7f7;">Conteúdo<3</div></center>

Por favor não apague nada se não deforma!

E só! Simples fácil e prático :B Se usar credita! Enjoy <3

[htmluv]

Arrow Header

Como esse aqui:

Basta meter isso no teu css :

.module {background: #eee; margin-left:-5px; margin-top:-12px; margin-bottom:-8px;} .module h2 {background: #ccc;line-height: 2;padding: 0 0 0 10px;font-size: 16px;box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);} .module h2 a {float: right;position: relative;text-decoration: none;color: #333;padding: 0 10px;border-left: 5px solid white;-webkit-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;transition: all 0.2s linear;} .module h2 a:hover {padding: 0 14px; margin-right:0px;} .module h2 a:active {padding: 0 16px;} .module h2 a:before, .module h2 a:after { content: "";position: absolute;top: 50%;width: 0;height: 0;} .module h2 a:before {left: -12px;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 8px solid white; margin-top: -8px;} .module.blue h2 a {background: #3a414b; color:#FFF;} .module.blue h2 a:hover {background: #COR DEPOIS QUE PASSA O CURSOR;} .module.blue h2 a:after {left: -5px;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-right: 6px solid #COR DEPOIS QUE PASSA O CURSOR ;margin-top: -6px;} .module.blue h2 a:hover:after {border-right-color: #MESMA COR DO DEPOIS QUE PASSA O CURSOR;}

E onde quer por mete isso:

<div class="module blue"> 

<h2>ALGO<a>AQUI</a></h2></div>

Se usar credita :)