Si necesita agregar líneas horizontales de estilo separador a sus sitios web, sus opciones típicas incluyen 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 impacto negativo en el sitio. actuación. También puede usar la propiedad de borde CSS para agregar bordes que actúen como líneas en la parte superior o en la parte inferior de un elemento, creando efectivamente su línea separadora.
O, mejor aún, use el elemento HTML para la regla horizontal.
El elemento de regla horizontal
El aspecto predeterminado de las líneas de regla horizontales no es ideal. Para que se vean más agradables, agregue CSS para ajustar la apariencia visual de estos elementos para que estén en línea con la forma en que desea que se vea su sitio.
Una etiqueta de recursos humanos básica se muestra de 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.
Ancho y alto son consistentes en todos los navegadores
Los únicos estilos que son consistentes en los navegadores web son el ancho y los 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 del 50 por ciento del elemento principal (tenga en cuenta que estos ejemplos incluyen todos los estilos en línea. En una configuración de producción, estos estilos en realidad se escribirían en una hoja de estilo externa para facilitar la administración en todas sus páginas):
estilo = "ancho: 50%;">
Y en este ejemplo la altura es 2em: estilo = "altura: 2em;"> En los navegadores modernos, el navegador construye la línea ajustando el borde. Por lo tanto, 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 del borde, el color y el estilo hará 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, con guiones y 1px de ancho: style = "border: 1px dashed # 000;">
Pero si cambia el borde y la altura, los estilos se ven ligeramente diferentes en los navegadores muy obsoletos que en los navegadores modernos. Como puede ver en este ejemplo, si lo ve en IE7 y en una versión inferior (un navegador que está lamentablemente desactualizado y que ya no es compatible con Microsoft), hay una línea interior biselada que no se muestra en los otros navegadores (incluido IE8 y versiones posteriores) : style = "altura: 1.5em; ancho: 25em; borde: 1px sólido # 000;">
Esos navegadores antiguos realmente no son una gran preocupación en el diseño web actual, ya que han sido reemplazados en gran medida por opciones más modernas. En lugar de un color, puede definir una imagen de fondo para su regla horizontal para que se vea exactamente como lo desea, pero aún se muestra semánticamente en su marca. En este ejemplo usamos una imagen que es de tres líneas onduladas. Al configurarlo como la imagen de fondo sin repetición, crea un descanso en el contenido que se ve casi como se ve en los libros: style = "height: 20px; background: #fff url (aa010307.gif) centro de desplazamiento sin repetición; borde: ninguno;"> Con CSS3, también puedes hacer tus líneas más interesantes. El elemento HR es tradicionalmente un horizontal línea, pero con la propiedad de transformación CSS, puede cambiar su aspecto. Una transformación favorita en el elemento HR es cambiar la rotación. Puedes rotar tu elemento HR para que sea ligeramente diagonal: hr {-moz-transform: rotate (10deg);-webkit-transform: rotate (10deg);-o-transformar: rotar (10deg);-ms-transformar: rotar (10deg);transformar: rotar (10deg);}
O puedes girarlo para que sea completamente vertical: hr {-moz-transform: rotate (90deg);-webkit-transform: rotate (90deg);-o-transformar: rotar (90deg);-ms-transformar: rotar (90deg);transformar: girar (90deg);}
Recuerde que esta técnica rota el HR en función de su ubicación actual en el documento, por lo que es posible que deba ajustar la posición para llegar a donde lo desee. No se recomienda usar esto para agregar líneas verticales a un diseño, pero es una forma de obtener un efecto interesante. Una cosa que algunas personas hacen en lugar de usar el elemento HR es confiar en las fronteras de otros elementos. Pero a veces un HR es mucho más conveniente y fácil de usar que tratar de configurar bordes. Los problemas del modelo de caja de algunos navegadores pueden dificultar aún más la configuración de un borde. Cambiar las fronteras puede ser desafiante
Hacer una línea decorativa con una imagen de fondo
Transformando los elementos de HR
Otra forma de obtener líneas en tus páginas
