Facer liñas de busca interesantes nas páxinas web con etiquetas HR
Se precisa engadir liñas horizontais de estilo separador aos seus sitios web, ten algunhas opcións. Podería engadir ficheiros de imaxe reais destas liñas á súa páxina, pero iso requiriría que o seu navegador recuperase e cargase eses arquivos, o que podería ter un impacto negativo no rendemento do sitio.
Podería usar a propiedade da fronteira CSS para engadir bordos que actúan como liñas na parte superior ou na parte inferior dun elemento, efectivamente creando a súa liña separadora.
Finalmente, pode usar o elemento HTML para a regra horizontal: o
O elemento da regra horizontal
Se xa puxo un elemento nunha páxina web, probabelmente descubriu que a forma predeterminada que se amosan estas liñas non son ideais. Isto significa que debes acudir a CSS para axustar a aparencia visual destes elementos para estar en liña coa forma en que queres que o teu sitio se vexa.
Unha etiqueta HR básica mostra a forma en que o navegador quere amosar. Os navegadores modernos normalmente amosan etiquetas HR non marcadas cun ancho de 100%, unha altura de 2px e un borde 3D en negro para crear a liña.
Aquí móstrase un exemplo dun elemento estándar de RH ou se pode ver nesta imaxe como se ve un RH sen explorar nos navegadores modernos.
O ancho e a altura son consistentes a través dos navegadores
Os únicos estilos que son coherentes entre os navegadores web son o ancho e os estilos. Estes definen o tamaño da liña. Se non define o ancho e a altura o ancho predeterminado é 100% eo alto predeterminado é 2px.
Neste exemplo, o ancho é o 50% do elemento primario (nota estes exemplos a continuación, todos inclúen estilos en liña. Nunha configuración de produción, estes estilos estarían escritos nunha folla de estilo externa para facilitar a xestión en todas as súas páxinas):
style = "width: 50%;">
E neste exemplo a altura é 2em:
style = "height: 2em;">
Cambiar as fronteiras pode ser desafiante
Nos navegadores modernos, o navegador constrúe a liña axustando o bordo. Entón, se elimina o bordo coa propiedade do estilo, a liña desaparecerá na páxina. Como podes ver (ben, non verá nada, xa que as liñas serán invisibles) neste exemplo:
style = "border: none;">
Axustar o tamaño, cor e estilo do borde fará que a liña pareza diferente e ten o mesmo efecto en todos os navegadores modernos. Por exemplo, nesta demostración o bordo é vermello, reducido e 1px de ancho:
style = "border: 1px raided # 000;">
Pero se cambia o bordo e a altura, os estilos parecen un pouco diferentes en navegadores moi anticuados que os navegadores modernos. Como se pode ver neste exemplo, se o ves no IE7 e a continuación (un navegador que lamentablemente está desactualizado e que xa non é soportado por Microsoft) hai unha liña interna biselada que non se mostra nos outros navegadores (incluído IE8 ou superior) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Os navegadores anticuados non son realmente unha gran preocupación no deseño web hoxe en día, xa que foron reemplazados en gran medida por opcións máis modernas.
Faga unha liña decorativa cunha imaxe de fondo
No canto dunha cor, pode definir unha imaxe de fondo para a súa RH para que se vexa exactamente como o desexa, pero aínda se mostra semánticamente no seu marcado.
Neste exemplo usamos unha imaxe de tres liñas onduladas. Ao configuralo como a imaxe de fondo sen repetir, crea unha ruptura no contido que se ve case como se ve nos libros:
style = "height: 20px; background: #fff url (aa010307.gif) non-repeat centro de desprazamento; border: none;">
Transformando elementos de RH
Con CSS3, tamén podes facer as túas liñas máis interesantes. O elemento HR é tradicionalmente unha liña horizontal , pero coa propiedade da transformación CSS, pode cambiar a forma na que se ven. A transformación favorita no elemento HR é cambiar a rotación.
Pode xirar o elemento HR de xeito que sexa só lixeiramente diagonal:
hr {
-moz-transformar: xirar (10deg);
-webkit-transformar: xirar (10deg);
-o-transformar: xirar (10deg);
-ms-transformar: rotar (10deg);
transformar: rotar (10deg);
}
Ou pode rotalo de xeito que sexa completamente vertical:
hr {
-moz-transformar: xirar (90deg);
-webkit-transform: xirar (90deg);
-o-transformar: rotar (90deg);
-ms-transformar: xirar (90deg);
transformar: xirar (90deg);
}
Lembre que isto xira a HR en función da súa localización actual no documento, polo que pode ter que axustar o posicionamento para obtelo onde o desexe. Non se recomenda usar isto para engadir liñas verticais a un deseño, pero é unha forma de obter un efecto interesante.
Outra forma de obter liñas nas túas páxinas
Unha cousa que algunhas persoas fan en lugar de utilizar o elemento HR é contar con fronteiras doutros elementos. Pero ás veces unha RH é moito máis cómoda e fácil de usar que tentar configurar as fronteiras. Os problemas do modelo de caixa dalgúns navegadores poden facer a configuración dun bordo aínda máis complicado.