HR es una de esas etiquetas que van cayendo en el olvido sin embargo es posible hacer cosas interesantes con esta etiqueta, que en un principio luce muy aburrida pero es posible con un poco CSS darle un poco de vida
HR con colores sólidos
Podría por ejemplo cambiarle el color con este código
1 2 3 4 | color: #f8b500; background-color: #f8b500; height: 5px; border:none; |
Y obtenemos:
HR punteada
No es necesario que nuestro separador sea sólido, podría ser punteado o con lineas entrecortadas
1 2 3 | color: #f8b500; height: 0px; border:1px dashed; |
Separador con imágenes
No se puede directamente con CSS sobre un HR ya que los bordes siempre aparecen, sin embargo es posible para estos casos usar un div con un fondo de imagen
Este código no funciona si se aplica desde un archivo CSS, sólo si lo pones directamente dentro de la etiqueta
Bueno, ahí va la solución definitiva para Estilos HR desde CSS válida para todos TODOS los navegadores:
.estiloHR{
height: 2px;
width: 400px;
border: 0px solid #006666;
background-color: #006666;
color:#006666;
}
saludos
el codigo funciona perfectamente!