Se você precisar adicionar linhas horizontais no estilo separador aos seus sites, suas opções típicas incluem adicionar arquivos de imagem dessas linhas à sua página, mas isso exigiria que o navegador recuperasse e carregasse esses arquivos, o que poderia ter um impacto negativo no site desempenho. Você também pode usar a propriedade de borda CSS para adicionar bordas que atuam como linhas na parte superior ou na parte inferior de um elemento, criando efetivamente sua linha separadora.
Ou - melhor ainda - use o elemento HTML para a regra horizontal.
O elemento de regras horizontais
A aparência padrão das linhas de regra horizontal não é a ideal. Para torná-los mais bonitos, adicione CSS para ajustar a aparência visual desses elementos para que eles estejam alinhados com a aparência do site.
Uma tag básica de RH é exibida da maneira que o navegador deseja exibi-la. Navegadores modernos normalmente exibem tags HR não estilizadas com largura de 100%, altura de 2 pixels e borda 3D em preto para criar a linha.
Largura e altura são consistentes em navegadores
Os únicos estilos consistentes nos navegadores da Web são a largura e os estilos. Estes definem quão grande a linha será. Se você não definir a largura e a altura, a largura padrão será 100% e a altura padrão será 2 pixels.
Neste exemplo, a largura é de 50% do elemento pai (observe que esses exemplos abaixo incluem estilos embutidos. Em uma configuração de produção, esses estilos seriam realmente gravados em uma folha de estilos externa para facilitar o gerenciamento em todas as suas páginas):
style = "width: 50%;">
E neste exemplo a altura é 2em: style = "height: 2em;"> Nos navegadores modernos, o navegador cria a linha ajustando a borda. Portanto, se você remover a borda com a propriedade style, a linha desaparecerá na página. Como você pode ver (bem, você não verá nada, pois as linhas ficarão invisíveis) neste exemplo: style = "border: none;">
Ajustar o tamanho, a cor e o estilo da borda fará com que a linha pareça diferente e tenha o mesmo efeito em todos os navegadores modernos. Por exemplo, nessa demonstração, a borda é vermelha, tracejada e com largura de 1 px: style = "border: 1px tracejado # 000;">
Mas se você alterar a borda e a altura, os estilos parecerão um pouco diferentes em navegadores muito desatualizados do que nos navegadores modernos. Como você pode ver neste exemplo, se você o visualizar no IE7 e abaixo (um navegador que está desatualizado e não é mais suportado pela Microsoft), há uma linha interna chanfrada que não é exibida nos outros navegadores (incluindo IE8 e acima) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Esses navegadores antiquados não são uma grande preocupação no design da web hoje, já que foram substituídos em grande parte por opções mais modernas. Em vez de uma cor, você pode definir uma imagem de plano de fundo para a sua régua horizontal, de modo que fique exatamente como você deseja, mas ainda seja exibida semanticamente na sua marcação. Neste exemplo usamos uma imagem que é de três linhas onduladas. Ao defini-lo como imagem de fundo sem repetição, cria uma quebra no conteúdo que parece quase como você vê nos livros: style = "height: 20px; background: #fff url (aa010307.gif) centro de rolagem sem repetição; border: none;"> Com o CSS3, você também pode tornar suas linhas mais interessantes. O elemento HR é tradicionalmente horizontal linha, mas com a propriedade de transformação CSS, você pode alterar a aparência deles. Uma transformação favorita no elemento HR é alterar a rotação. Você pode girar seu elemento HR para que fique ligeiramente diagonal: hr {-moz-transform: rotate (10deg);-webkit-transform: rotate (10deg);-o-transform: rotate (10deg);-ms-transform: rotate (10deg);transformar: girar (10deg);}
Ou você pode girar para que fique completamente vertical: hr {-moz-transform: rotate (90deg);-webkit-transform: rotate (90deg);-o-transformar: girar (90deg);-ms-transform: rotate (90deg);transformar: girar (90deg);}
Lembre-se de que essa técnica gira o RH com base em sua localização atual no documento, portanto, talvez seja necessário ajustar o posicionamento para chegar onde você deseja. Não é recomendável usar isso para adicionar linhas verticais a um design, mas é uma maneira de obter um efeito interessante. Uma coisa que algumas pessoas fazem em vez de usar o elemento HR é confiar nas fronteiras de outros elementos. Mas às vezes um RH é muito mais conveniente e fácil de usar do que tentar configurar bordas. Os problemas de modelo de caixa de alguns navegadores podem tornar a criação de uma borda ainda mais complicada. Mudar as fronteiras pode ser desafiador
Faça uma linha decorativa com uma imagem de fundo
Transformando Elementos HR
Outra maneira de obter linhas nas suas páginas
