Cómo usar CSS para estilizar las etiquetas HR (regla horizontal)

Cómo usar CSS para estilizar las etiquetas HR (regla horizontal)

Cómo usar CSS para estilizar las etiquetas HR (regla horizontal)

VALORACIÓN DEL ARTÍCULO:
5/5


Si necesita añadir líneas horizontales de estilo separador a sus sitios web, sus opciones típicas incluyen añadir 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 rendimiento del sitio. También puede utilizar la propiedad CSS border para añadir bordes que actúen como líneas en la parte superior o inferior de un elemento, creando efectivamente su línea de separación.

O – mejor aún – usar el elemento HTML para la regla horizontal.

El elemento de regla horizontal

La apariencia predeterminada de las líneas de reglas horizontales no es la ideal. Para que se vean mejor, agregue CSS para ajustar la apariencia visual de estos elementos para que estén en línea con la apariencia que desea que tenga su sitio.

Se visualiza una etiqueta HR básica de la forma en que el browser desea visualizarla. 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.

Anchura y altura son consistentes en todos los navegadores

Los únicos estilos que son consistentes en todos los navegadores web son el ancho y los estilos. Éstos definen el tamaño de la línea. Si no define la anchura y la altura, la anchura por defecto es del 100 por ciento y la altura por defecto es de 2 píxeles.

En este ejemplo, el ancho es el 50 por ciento del elemento padre (observe que estos ejemplos a continuación incluyen estilos en línea). En un entorno de producción, estos estilos se escribirían en una hoja de estilo externa para facilitar la gestión de todas las páginas):

>

Y en este ejemplo la altura es 2em:

>

Cambiar los bordes puede ser difícil

En los navegadores modernos, el navegador construye la línea ajustando el borde. Por lo tanto, si elimina el borde con la propiedad style, la línea desaparecerá de la página. Como puedes ver (bueno, no verás nada, ya que las líneas serán invisibles) en este ejemplo:

>

Ajustar el tamaño del borde, el color y el estilo hará que la línea se vea diferente y tiene el mismo efecto en todos los navegadores modernos. Por ejemplo, en esta demostración el borde es rojo, punteado y de 1 píxel de ancho:

>

Pero si cambia el borde y la altura, los estilos se ven ligeramente diferentes en navegadores muy anticuados que en los navegadores modernos. Como puede ver en este ejemplo, si lo ve en IE7 y más abajo (un navegador que lamentablemente está desactualizado y que ya no es compatible con Microsoft) hay una línea interna biselada que no se muestra en los otros navegadores (incluyendo IE8 y más arriba):

>

Esos navegadores anticuados no son realmente una gran preocupación en el diseño web hoy en día, ya que han sido reemplazados en gran medida por opciones más modernas.

Hacer una línea decorativa con una imagen de fondo

En lugar de un color, puede definir una imagen de fondo para su regla horizontal de modo que se vea exactamente como usted desea, pero que se muestre semánticamente en su marca de revisión. En este ejemplo usamos una imagen que es de tres líneas onduladas. Al configurarlo como la imagen de fondo sin repetición, crea una ruptura en el contenido que se parece casi a lo que se ve en los libros:

>

Transformación de elementos HR

Con CSS3, también puede hacer que sus líneas sean más interesantes. El elemento HR es tradicionalmente una línea horizontal, pero con la propiedad Transformar CSS, puede cambiar su aspecto. Una de las transformaciones favoritas del elemento HR es la de modificar la rotación.

Puede girar el elemento HR para que quede ligeramente en diagonal:

hr {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
o-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transformar: rotar (10deg);
}

O puede rotarlo para que quede completamente vertical:

hr {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
o-o-transform: rotate(90deg);
-ms-transform: rotate(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 tenga que ajustar la posición para que llegue a su destino. No es recomendable usar esto para añadir líneas verticales a un diseño, pero es una forma de obtener un efecto interesante.

Otra forma de obtener líneas en sus páginas

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 RRHH es mucho más cómodo y fácil de usar que intentar establecer fronteras. Los problemas con el modelo de caja de algunos navegadores pueden hacer que la configuración de un borde sea aún más complicada.

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo