Tipografia Vintage com Css

Tipografia Vintage com Css

Neste tutorial você vai aprender como criar um titulo personalizado Tipografica Vintage com Css, somente com Css e Html.

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

Tags: <div>, <span>, <h1> e a tag <p> para inserirmos o texto de descrição.

Essas tags usaremos para criar o Titulo estilo vintage com html e css.

Vamos Adicionar o HTML

   <div class="box-vintage">

      <span class="span-vintage">Blog</span>
      <h1 class="h1-vintage">Loop Nerd</h1>
      <p class="p-vintage">Códigos Html e Css Prontos</p>

   </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o Titulo Vintage com css e html.

.box-vintage {

  font-family: "Pacifico", cursive;
  font-weight: 400;
  position: relative;
  margin: 80px auto;
  width: 600px;
  font-size: 30px;
  text-align: center;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;

}

span {

  display: block;

}

.span-vintage {
  position: relative;
}

.span-vintage:before, .span-vintage:after {

  content: "\e17e";
  font-family: untitled-font-1;
  position: relative;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 16px;
  margin: 0 30px;
  top: -5px;
}

.h1-vintage {
  
font-family: "Changa One", sans-serif;
font-family: "Changa One", sans-serif;
font-weight: 400;
color: #99845d;
text-transform: uppercase;
font-size: 90px;
letter-spacing: 15px;
margin: 0 0;

text-shadow: 
1px 0px 1px #000000, 
0px 1px 1px #000000, 
2px 1px 1px #000000, 
1px 2px 1px #000000, 
3px 2px 1px #000000, 
2px 3px 1px #000000, 
4px 3px 1px #000000, 
3px 4px 1px #000000, 
5px 4px 1px #000000, 
4px 5px 1px #000000, 
6px 5px 1px #000000, 
5px 6px 1px #000000, 
7px 6px 1px #000000;

}

.p-vintage {

  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  margin: 25px 0 0;
  position: relative;
  letter-spacing: 6px;

}

.p-vintage:before, .p-vintage:after {

  content: " ";
  position: absolute;
  width: 50px;
  height: 5px;
  border-top: 1px solid #222222;
  border-bottom: 1px solid #222222;

}

.p-vintage:before { margin: 10px 0 0 -70px; }

.p-vintage:after { margin: 10px 0 0 20px; }

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando