H1 title css
H1 title css simples
H1 title css personalizado com css
Veja neste tutorial como criar um H1 title css personalizado com css.
Nesta seção, projetaremos uma estrutura simples na tag <header>, <h1> e a <span> para inserirmos o sub titulo de descrição.
Essas são as tags que usaremos para criar o nosso h1 title
.
Vamos Adicionar o HTML
<header class="box-title"> <h1 class="the-title">Loop <b>Nerd</b> <span>Códigos HTML e CSS Prontos</span> </h1> </header>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso h1 title com CSS
.
.the-title { position: relative; padding: 0; margin: 0; font-family: 'open_sansregular'; font-weight: 300; color: #080808; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .the-title span { display: block; font-size: 14px; line-height: 1.3; } .the-title em { font-style: normal; font-weight: 600; } .box-title h1 { text-align: center; color:#222; font-size:30px; font-weight:400; word-spacing:1px; letter-spacing:5px; color:#007cff; } .box-title h1 span { line-height:2em; padding-bottom:15px; text-transform: none; font-size:.7em; font-weight: normal; font-style: italic; font-family: "Playfair Display","Bookman",serif; color:#999; letter-spacing:-0.005em; word-spacing:1px; letter-spacing:none; } .box-title h1 b { font-weight:bold; font-family:'open_sansbold'; } .box-title h1:after, .box-title h1:before { position: absolute; left: 0; bottom: 0; width: 45px; height: 4px; content: ""; right: 45px; margin:auto; background-color: #ccc; } .box-title h1:before { background-color:#007cff; left:45px; width:90px; }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Deixe um comentário