Olá galera!
Alguém aí já usou ou usa a tag HR ? Para quem não conhece, a tag HR produz uma linha horizontal que pode fazer a divisão de conteúdos.
Eu particularmente gosto de usar esta tag para colocar “linhas” entre os conteúdos dos meus sites. Muita gente não adere ao HR, preferindo colocar bordas nas DIV’s. Mas é questão de gosto.
Neste post vou ensinar vocês a estilizarem a tag HR através de CSS.
A tag HR é definida do seguinte modo:
Pesquisando na internet, achei todas as propriedades que a tag HR aceita, segue abaixo a lista:
- O Mozilla, IE e Opera aceitam as propriedades “width” e “height” para a tag
- A propriedade “border” pode ser usada no Mozilla e no IE, mas não funciona corretamente no Opera.
- O Mozilla e o Opera usam a propriedade “background-color” para a cor do HR, já o IE utiliza a propriedade “color”
- Todos os três browsers citados acima aceitam a propriedade “background-image” para a tag HR
Exemplos:
1 Linha vermelha:
Código CSS:
hr {
color: #f00;
background-color: #f00;
height: 5px;
}
Visualização:
Um retângulo de bordas vermelhas e altura de 10px:
Código CSS:
hr {
border: 1px solid #f00;
color: #fff;
background-color: #fff;
height: 10px;
}
Visualização:
2 linhas, uma acima da outra. O Opera mostra como um retangulo. Ambas são vermelhas, a primeira é pontilhada e a segunda é sólid.
Código CSS:
hr {
border-top: 1px dashed #f00;
border-bottom: 1px solid #f00;
color: #fff;
background-color: #fff;
height: 4px;
}
Visualização:
Espero que tenham gostado da dica.
Abraços
11 respostas
tah tinha visto isso uehuehuhehe
mas hr num tah com muito coisa naum…
uehuhe
muito bom..
mas o hr tem um problema, ele “fecha” alguns elementos, como o “p”
Muito bom tutorial.
Parabéns!
Legal procurei no maujor.com … e aqui vc resumiu melhor!
😉
Gostei, usei muito hr, mas hoje não faço mais uso dela. Havia me esquecido dessa tag, por tanto tempo sem usar, hehehe.
Estava vendo um código fonte de um site e vi ela, e ae pesquisei sobre ela e vim parar aqui. Também já te conhecia, mas também não lembrava de você, hahahaha !
Add o feed, muito legal o conteúdo, abraços.
Muito bom o seu tutorial! Só uma diquinha pro pessoal: Tente:
no style:
hr {border-top: 1px dashed #f00;}no hr, o sombreado fica bom, não use noshade…!Eu gosto da tag, é simples e rapida, boas dicas.
Bem jóia o tutorial, me ajudou bastante. Parabéns!
Porém você comenta que o todos os três citados acima aceitam a propriedade “background-image” para a tag HR.
O IE não aceita muito bem essa propriedade não ein…
Beleza!!! Estava procurando na internet um tempão.
Já adcionei o seu site no favori’hits!!!
Muito bom os exempos, parabens.
Gostei da estilização hr , muito simples e eficiente , boa explicação e parabéns pelo blog!