Header Html Design em Linhas
PRÓXIMO
Header Html Estilo Orgânico
ANTERIOR
Header Html Design Left
Postado: 27 de maio de 2023
Tempo de Leitura: 2 Minutos
Header Html Design em Linhas
O elemento HTML <header> representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.
A tag Header é usado para definir uma seção de header, mas em relação ao elemento que a contém. Ou seja, pode ser usado como título de uma página inteira o uso mais comum, mas também como título de um artigo ou de qualquer outra parte do conteúdo da página.
Veja neste artigo como criar um Header Html Design em Linhas personalizado com html css.
Nesta seção, projetaremos uma estrutura simples na tag <header> e a <h1> para inserirmos o titulo.
Essas são as tags que usaremos para criar o nosso Header Design em Linhas com css.
Vamos Adicionar o HTML
HTML
<header class="box-header">
<h1 class="title-line">Html e Css</h1>
</header> Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Header Design em Linhas
CSS
.title-line {
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;
}
.box-header .title-line {
font-size: 26px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
width: 162px;
text-align: center;
margin: auto;
white-space: nowrap;
padding-bottom: 13px;
}
.box-header .title-line:before {
background-color: #007cff;
content: '';
display: block;
height: 4px;
width: 75px;
margin-bottom: 5px;
}
.box-header .title-line:after {
background-color: #007cff;
content: '';
display: block;
position:absolute;
right:0;
bottom:0;
height: 4px;
width: 75px;
margin-bottom: 0.25em;
}Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Conclusão
O HTML Header, seja como <head> ou <header>, é essencial para o funcionamento e organização de uma página web. O primeiro serve para fornecer informações técnicas e de configuração, enquanto o segundo estrutura e apresenta informações iniciais visíveis ao usuário. Ambos são indispensáveis para criar sites eficientes, bem organizados e acessíveis.
Veja o Resultado baixo!
Deixe um comentário