Para adicionar linhas horizontais de estilo separador aos seus sites, uma opção inclui adicionar arquivos de imagem dessas linhas a sua página, mas isso exigiria que seu navegador recuperasse e carregasse esses arquivos, o que poderia ter um efeito negativo sobre desempenho do site. Você também pode usar o CSS propriedade de fronteira para adicionar fronteiras que atuam como linhas na parte superior ou inferior de um elemento, criando efetivamente sua linha separadora.
Ou, melhor ainda, use o HTML elemento para a régua horizontal.
O Elemento de Regra Horizontal
A aparência padrão das linhas horizontais não é ideal. Para torná-los mais bonitos, adicione CSS para ajustar a aparência visual desses elementos para que fiquem de acordo com a aparência que você deseja que seu site tenha.
Uma tag básica de RH exibe a maneira como o navegador deseja exibi-la. Os navegadores modernos geralmente exibem tags HR sem estilo com uma largura de 100 por cento, uma altura de 2 pixels e uma borda 3D em preto para criar a linha.
A largura e a altura são consistentes em todos os navegadores
Os únicos estilos que são consistentes em todos os navegadores da web são os largura e estilos. Eles definem o quão grande será a linha. Se você não definir a largura e a altura, a largura padrão é 100 por cento e a altura padrão é 2 pixels.
Neste exemplo, a largura é 50 por cento do elemento pai (observe que todos os exemplos abaixo incluem estilos embutidos. Em um ambiente de produção, esses estilos seriam realmente escritos em uma folha de estilo externa para facilitar o gerenciamento em todas as suas páginas):
estilo = "largura: 50%;">
E neste exemplo a altura é 2em:
estilo = "altura: 2em;">
Mudar as fronteiras pode ser desafiador
Em navegadores modernos, o navegador constrói a linha ajustando a borda. Portanto, se você remover a borda com a propriedade de estilo, a linha desaparecerá da página. Como você pode ver (bem, você não verá nada, pois as linhas ficarão invisíveis) neste exemplo:
estilo = "borda: nenhum;">
Ajustar o tamanho, a cor e o estilo da borda torna a linha diferente e tem o mesmo efeito em todos os navegadores modernos. Por exemplo, nesta demonstração, a borda é vermelha, tracejada e com 1 px de largura:
style = "border: 1px tracejado # 000;">
Faça uma linha decorativa com uma imagem de fundo
Em vez de uma cor, defina uma imagem de plano de fundo para sua régua horizontal de forma que tenha a aparência exata que você deseja, mas ainda seja exibida semanticamente em sua marcação. Neste exemplo, usamos uma imagem de três linhas onduladas. Definindo-o como o imagem de fundo sem repetição, ele cria uma quebra no conteúdo que parece quase como você vê nos livros:
estilo = "altura: 20px; plano de fundo: #fff url (aa010307.gif) centro de rolagem sem repetição; borda: nenhum; ">
Transformando Elementos de RH
Com CSS3, você também pode tornar suas linhas mais interessantes. O elemento RH é tradicionalmente um horizontal linha, mas com a propriedade de transformação do CSS, você pode alterar a aparência deles. Uma transformação favorita no elemento HR é alterar a rotação.
Gire seu elemento de RH para que fique ligeiramente diagonal:
hr {
-moz-transform: rotate (10deg);
-webkit-transform: rotate (10deg);
-o-transformada: girar (10deg);
-ms-transform: girar (10deg);
transformar: girar (10deg);
}
Ou você pode girá-lo para que fique completamente vertical:
hr {
-moz-transform: rotate (90deg);
-webkit-transform: girar (90deg);
-o-transformada: girar (90deg);
-ms-transform: girar (90deg);
transformar: girar (90deg);
}
Essa técnica gira o HR com base em sua localização atual no documento, portanto, pode ser necessário ajustar o posicionamento para colocá-lo onde deseja. Não é recomendável usar isso para adicionar linhas verticais a um design, mas é um efeito interessante.
Outra maneira de obter linhas em suas páginas
Uma coisa que algumas pessoas fazem em vez de usar o elemento HR é confiar nas bordas de outros elementos. Mas às vezes um RH é muito mais conveniente e fácil de usar do que tentar definir fronteiras. Os problemas do modelo de caixa de alguns navegadores podem tornar a configuração de uma borda ainda mais complicada.