Para agregar líneas horizontales de estilo separador a sus sitios web, una opción incluye agregar archivos de imagen de esas líneas a su página, pero eso requeriría que su navegador recupere y cargue esos archivos, lo que podría tener un efecto negativo en rendimiento del sitio. También puede utilizar el CSS propiedad de borde para agregar fronteras que actúan como líneas en la parte superior o inferior de un elemento, creando efectivamente su línea de separación.
O, mejor aún, utilice el HTML elemento de la regla horizontal.
El elemento de regla horizontal
La apariencia predeterminada de las líneas de reglas horizontales no es ideal. Para que se vean mejor, agregue CSS para ajustar la apariencia visual de estos elementos para que esté en línea con cómo desea que se vea su sitio.
Una etiqueta de recursos humanos básica muestra la forma en que el navegador quiere mostrarla. Los navegadores modernos suelen mostrar etiquetas HR sin estilo con un ancho del 100 por ciento, una altura de 2 píxeles y un borde 3D en negro para crear la línea.
El ancho y el alto son consistentes en todos los navegadores
Los únicos estilos que son consistentes en todos los navegadores web son los ancho y estilos. Estos definen qué tan grande será la línea. Si no define el ancho y el alto, el ancho predeterminado es 100 por ciento y el alto predeterminado es 2 píxeles.
En este ejemplo, el ancho es el 50 por ciento del elemento principal (tenga en cuenta que estos ejemplos a continuación incluyen todos estilos en línea. En un entorno de producción, estos estilos se escribirían en una hoja de estilo externa para facilitar la administración en todas sus páginas):
style = "ancho: 50%;">
Y en este ejemplo la altura es 2em:
estilo = "altura: 2em;">
Cambiar las fronteras puede ser un desafío
En los navegadores modernos, el navegador construye la línea ajustando el borde. Entonces, si elimina el borde con la propiedad de estilo, la línea desaparecerá en la página. Como puede ver (bueno, no verá nada, ya que las líneas serán invisibles) en este ejemplo:
style = "border: none;">
Ajustar el tamaño, el color y el estilo del borde hace que la línea se vea diferente y tenga el mismo efecto en todos los navegadores modernos. Por ejemplo, en esta demostración, el borde es rojo, discontinuo y de 1 px de ancho:
style = "border: 1px discontinuo # 000;">
Hacer una línea decorativa con una imagen de fondo
En lugar de un color, defina una imagen de fondo para su regla horizontal para que se vea exactamente como lo desea, pero aún se muestre semánticamente en su marcado. En este ejemplo usamos una imagen de tres líneas onduladas. Al establecerlo como el imagen de fondo sin repetición, crea una interrupción en el contenido que se parece casi a lo que ves en los libros:
style = "altura: 20px; fondo: #fff url (aa010307.gif) centro de desplazamiento sin repetición; border: none; ">
Transformando elementos de recursos humanos
Con CSS3, también puede hacer que sus líneas sean más interesantes. El elemento de recursos humanos es tradicionalmente un horizontal line, pero con la propiedad de transformación CSS, puede cambiar su apariencia. Una transformación favorita en el elemento HR es cambiar la rotación.
Gire su elemento de FC para que quede ligeramente en diagonal:
hr {
-moz-transform: rotar (10 grados);
-webkit-transform: rotar (10 grados);
-o-transform: rotar (10 grados);
-ms-transform: rotar (10 grados);
transformar: rotar (10 grados);
}
O puede rotarlo para que quede completamente vertical:
hr {
-moz-transform: rotar (90 grados);
-webkit-transform: rotar (90 grados);
-o-transform: rotar (90 grados);
-ms-transform: rotar (90 grados);
transformar: rotar (90 grados);
}
Esta técnica rota la frecuencia cardíaca en función de su ubicación actual en el documento, por lo que es posible que deba ajustar la posición para llevarla a donde desee. No se recomienda usar esto para agregar líneas verticales a un diseño, pero es un efecto interesante.
Otra forma de colocar líneas en sus páginas
Una cosa que hacen algunas personas en lugar de utilizar el elemento de recursos humanos es confiar en los bordes de otros elementos. Pero a veces un RRHH es mucho más conveniente y más fácil de usar que intentar establecer fronteras. Los problemas del modelo de caja de algunos navegadores pueden hacer que configurar un borde sea aún más complicado.