Template CSS para adicionar uma linha de borda abaixo do cabeçalho
📝 Uso
Este template demonstra como usar a propriedade border-bottom no CSS para adicionar uma linha de borda abaixo de um cabeçalho.
📘 Explicação
O código CSS acima usa a propriedade border-bottom para adicionar uma linha abaixo do elemento h1. Você pode ajustar a cor e a espessura conforme necessário.
🔹 Código Parcial
<h1>Cabeçalho</h1>
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
💻 Código HTML Completo
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>CSS: Adicionar linha de borda abaixo do cabeçalho com border-bottom</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>Cabeçalho</h1>
<p>Este template demonstra como usar a propriedade <code>border-bottom</code> no CSS para adicionar uma linha de borda abaixo de um cabeçalho.</p>
</body>
</html>
💻 Código Completo Funcional
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>CSS: Adicionar linha de borda abaixo do cabeçalho com border-bottom</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>Cabeçalho</h1>
<p>Este template demonstra como usar a propriedade <code>border-bottom</code> no CSS para adicionar uma linha de borda abaixo de um cabeçalho.</p>
</body>
</html>
🎨 Técnicas práticas para o design de títulos
Usar border-bottom na decoração de títulos é uma forma eficaz de separar visualmente as seções e ao mesmo tempo alcançar um design sofisticado. Uma linha bem aplicada ajuda a expressar visualmente a hierarquia do conteúdo.
🌈 Variações de design
Além da linha solid padrão, é possível usar dotted ou dashed para linhas pontilhadas ou tracejadas, e double para uma linha dupla. Em vez de #000 (preto), ajuste as cores de acordo com o tema do site, como #3498db (azul) ou #e74c3c (vermelho).
📏 Tamanhos ideais
A espessura da linha costuma variar entre 1px a 3px. Use padding-bottom para ajustar o espaço entre o texto e a linha. Definir espessuras diferentes para os níveis de título (h1 a h6) torna a estrutura da informação mais clara — por exemplo, h1 com 3px, h2 com 2px, etc.
✨ Técnicas avançadas de decoração
Você pode usar linear-gradient() para criar linhas em degradê, e box-shadow para adicionar um efeito tridimensional. Usar pseudo-elementos como ::after permite criar designs mais originais e criativos.
As linhas nos títulos são guias visuais importantes, mas o excesso de decoração pode prejudicar a leitura. Mantenha um estilo consistente em todo o site e utilize efeitos mais destacados apenas em seções importantes.