H1 title css simples

H1 title css simples

Veja neste tutorial como criar um H1 title css simples.

Nesta seção, projetaremos uma estrutura simples na tag <header> e o <h1> para inserirmos o titulo. 

Essas são as tags que usaremos para criar o nosso h1 title simples.

Vamos Adicionar o HTML

    <header class="box-title">
       <h1 class="the-title">Loop <b>Nerd</b></h1>
    </header>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso h1 title simples.

.the-title {
  
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.the-title b { 

    font-family:'open_sansbold'; 
    font-weight:bold;
    color:#ea1111;

}

.box-title h1 {

    font-size:30px;
    text-align:center; 
    line-height:1.5em; 
    padding-bottom:45px; 
    font-family:'open_sansregular'; 
    letter-spacing: 2px; 
    color:#111;

}

.box-title h1:before {
 
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 30%;
  left:50%; 
  margin-left:-15%;
  height: 1px;
  content: "";
  background-color: #777; 
  z-index: 4;

}

.box-title h1:after {

  position:absolute;
  width:45px; 
  height:40px; 
  left:50%; 
  margin-left:-20px; 
  bottom:0px;
  font-family: "untitled-font-1";
  content: '\e612'; 
  font-size:30px; 
  line-height:40px; 
  color:#ea1111;
  font-weight:400; 
  z-index: 5;
  display:block;
  background-color:#ffffff;

}

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando