Title subtitle css – Estilo Retrô

Title subtitle css – Estilo Retrô

Este tutorial veremos como criar um title e subtitle com css estilo retrô com html e css.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tags: <section>, <h1>, <h2>, <span> e a tag <b> para dar efeito NEGRITO no texto.

Essas tags usaremos para criar a nosso title e subtitle com html e css.

Vamos Adicionar o HTML

    <section class="vintage">

      <h1 class="title">Códigos Html e Css</h1>
      
      <h2 class="subtitle">
        
        <span class="icon icon-star icone"></span> 
        <span>Loop <b>Nerd</b></span> 
        <span class="icon icon-cube icone"></span>
      
      </h2>

    </section>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e projetar o nosso title Retrô com css.

.vintage {

    width: 100%;
    text-align: center;
    padding: 200px 0px;
    float: left;
    background-image: url("../uploads/fundo-vintage.png");

}

.subtitle, .title {
  transform: matrix(1, -0.20, 0, 1, 0, 0);
  -ms-transform: matrix(1, -0.20, 0, 1, 0, 0);
  -webkit-transform: matrix(1, -0.20, 0, 1, 0, 0);
}

.subtitle {

  font-family: 'open_sansregular';
  text-transform: uppercase;
  font-size: 70px;
  text-shadow: 4px 5px #ebebdc, 6px 7px #00dae0;

}

.subtitle span {
  display: inline-block;
  vertical-align: middle;
}

.subtitle span b { 

    font-weight: bold;
    font-family: 'open_sansbold';
    background: #cfcfc2;
    padding: 0px 20px;

}

.subtitle span.icone {
  font-size: 28px;
}

.title {

    font-family: 'open_sansbold';
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;  
    position: relative;

}

.title:before, .title:after {

    content: " ";
    position: absolute;
    width: 90px;
    height: 5px;
    border-top: 1px solid #27dde0;
    border-bottom: 2px solid #121212;

}

.title:before {
   margin: 10px 0 0 -110px;
}

.title:after {
   margin: 10px 0 0 10px;
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando