Como seguramente ya sepas, los <hr> de HTML son una especie de líneas separadoras que podemos incluir en nuestro contenido para separar distintas secciones de una forma que sea clara. Por si no conoces dicha etiqueta, voy a añadir una justo aquí abajo.
En mi caso verás que es de color blanco porque mi página web, como puedes comprobar, es oscura, pero ten en cuenta que por defecto la que añadas a una página web será de color negro.
El caso, esta es una etiqueta bastante común (aunque también es cierto que va un poco a gustos, muchos la usan muy a menudo y otros la ignoran por completo) y hay que decir que aun tratándose de una simple línea divisoria, eso no significa que podamos jugar bastante con ellas mediante el CSS para conseguir diseños bastante interesantes.
Además de esto, esta etiqueta es algo peculiar ya que modificar algunos de sus aspectos básicos de diseño tiene su cosa, es decir, que es una etiqueta que tenemos de tratar de un modo algo fuera de lo habitual. A medida que vaya poniéndote ejemplos entenderás a qué me refiero; en fin, ¡vamos allá!
Tabla de Contenidos
Cómo Cambiar el Color de un <hr>
Podrías pensar que para cambiar el color de un <hr> tienes que usar la propiedad CSS de color (es lo intuitivo), pero no, para hacerlo tendrás que usar background-color en su lugar. Es lo que te comentaba, saber personalizar esta etiqueta de HTML tiene su cosa.
Así sería:
hr {
background-color: #a502ee;
}
Le he aplicado un color violeta muy cantón para que se vea la diferencia respecto a mi <hr> por defecto que es blanco, tu añade el color que prefieras. Este sería el resultado:
Al hacerlo así, estaríamos aplicando este cambio en todos los <hr>, si solo quisieras aplicarlo en algunos <hr> en concreto tendrás que usar clases, ids, o lo que más te convenga. Podrías crear por ejemplo una clase custom-hr y añadir allí estos estilos para luego aplicarla donde quieras.
Seguramente ya sepas de sobra cómo funcionan este tipo de cosas, pero por si acaso te dejaré el código por aquí. Primero el HTML:
<hr class="custom-hr">
Y ahora el CSS. Es lo mismo, pero en el selector usamos nuestra clase personalizada en lugar del selector general de <hr>.
.custom-hr {
background-color: #61008d;
}
Modificar el Tamaño de la Línea
Ahora veremos como podemos personalizar el tamaño de los <hr>. Comenzaremos primero viendo la forma de hacer que la línea sea más ancha o más alta… según el punto de vista. Básicamente, me refiero a que la línea como tal sea más gruesa, para conseguirlo tendremos que usar height.
hr {
height: 7px;
}
Así es nuestro <hr> ahora:
También podemos modificar qué tan larga es la línea, para ello debemos usar width. Por defecto, los <hr> siempre tendrán un with 100%, pero luego tú puedes personalizar su tamaño como quieras, ya sea usando una medida exacta como lo son los px (o em o rem) como una relativa como lo son los %. Ahora veremos un ejemplo de cada:
hr.fijo {
width: 40px;
}
hr.relativo {
width: 50%;
}
Te muestro el resultado de los dos en orden:
A mí me parece bastante más cómodo en este caso usar un porcentaje, pero por supuesto puedes usar el sistema de medición que quieras o el que mejor te venga según tu caso.
Si ahora quisieras que la línea se centre, bastaría con usar el típico margin auto.
hr {
width: 50%;
margin-right: auto;
margin-left: auto;
}
Por si te preguntas que por qué no he usado directamente un margin: auto; es porque la idea sería solo aplicar margen automático a los lados y que conserve el margen superior e inferior que tiene por default. Personaliza los márgenes como te venga mejor a ti.
También puedes alinearlas a la derecha si quieres, para ello necesitas establecer un margin auto solo por el lado izquierdo.
hr {
width: 50%;
margin-left: auto;
}
Puede parecer poco intuitivo por el hecho de incluir una propiedad que incluye la palabra left cuando lo que queremos es que se vaya a la derecha (right), pero piensa que al final lo que estamos diciendo con margin-left: auto; es que aplique todo el margen pueda a la izquierda del elemento, por lo que el elemento como tal se desplazará a la derecha.
<hr> con Borders
Otro modo distinto de definir el grosor de la línea de tu <hr> es usando border:
hr {
border: 1px solid #a502ee;
}
Resultado:
Puedes modificar el tamaño del border para hacer la línea más grande.
hr {
border: 4px solid #a502ee;
}
También puedes combinar border, height y background-color para conseguir líneas divisorias que tengan un borde de color distinto a lo que sería la línea en sí.
hr {
border: 3px solid #a502ee;
height: 17px;
background-color: white;
}
Como verás, el efecto es curioso y con la suficiente creatividad, seguro que puedes conseguir un <hr> muy llamativo.
Incluso puedes jugar con qué márgenes quieres que aparezcan con margin-top, margin-bottom, margin-left y margin-right para crear cosas como esta:
hr {
border-bottom: 3px solid #a502ee;
height: 14px;
background-color: white;
}
<hr> Bicolor
Siguiendo los consejos anteriormente mencionados de combinar background-color, height y los borders, ahora crearemos algunos diseños bastante peculiares de <hr>. Comencemos por un <hr> bicolor en sentido vertical.
hr {
border-top: 2px solid white;
border-bottom: 2px solid #a502ee;
}
Ahora creamos el mismo efecto pero en el sentido horizontal, este va a ser algo más complejo.
hr-left {
border: 2px solid #a502ee;
width: 50%;
float: left;
}
hr-right {
border: 2px solid white;
width: 50%;
float: left;
}
Y este sería el HTML:
<hr class="hr-left"><hr class="hr-right">
No tiene mucho misterio, estamos creando 2 <hr> que ocupan el 50% del ancho y que flotan a la izquierda, lo que implica que entre los dos ocuparán el 100% del ancho y quedarán pegados tal y como se muestra arriba.
<hr> Tricolor
Incluso puedes crear un <hr> tricolor, bueno, en realidad podrías llegar a crear <hr> de infinitos colores si te lo propones y sabes jugar bien con el CSS, pero tampoco quiero alargar demasiado este post.
Primero en el sentido vertical:
hr {
border-top: 4px solid #a502ee;
border-bottom: 4px solid #02fff7;
background-color: white;
height: 12px;
}
Tienes que tener en cuenta que en el caso de los <hr> el height representa todo el alto del elemento incluyendo los bordes, por lo que para definir perfectamente el tamaño en px que quieres que tenga la parte central, tendrás que sumarle el border-top y border-bottom al height que quieras.
En este caso quería un height de 4px, por lo que he sumado los 4px de height que quiero + los 4px de border-top + los 4px de border-bottom; de ahí sale el 12px.
Ahora seguimos con lo mismo pero en sentido horizontal. Es lo mismo que en el caso de bicolor, solo que en esta ocasión usaremos varios truquitos.
.grid-3-hr hr {
float: left;
width: calc(100%/3);
}
.grid-3-hr hr:first-child {
border: 3px solid #a502ee;
}
.grid-3-hr hr:nth-child(2) {
border: 3px solid white;
}
.grid-3-hr hr:last-child {
border: 3px solid #02fff7;
}
Veamos también el HTML, que aquí he usado una clase contenedora para definir de forma más óptima el tamaño de cada <hr>:
<div class="grid-3-hr"> <hr><hr><hr> </div>
Hemos creado una clase que engloba a todos los <hr> para que sea más sencillo añadir los estilos que comparten todos los <hr> y luego añadir los particulares de cada uno a parte (es más óptimo así).
Calc nos permite realizar operaciones matemáticas, en este caso hemos hecho un 100% dividido entre 3 para obtener 1/3 perfecto (así no añadimos un width: 33.33% o algo así ya que no sería un tercio perfecto ya que el total sería 99.99%, con esto tenemos 1/3 exacto).
Para seleccionar el primero, segundo y tercero hemos usado las ordenes de child de CSS que sirven para seleccionar entre varios hijos de un elemento padre (que en este caso sería la clase que engloba a todos, .grid-3-hr).
El efecto no queda mal, pero la verdad estos trucos para tener <hr> de distintos colores en el sentido horizontal a nivel semántico dejan un poco que desear ya que el navegador interpretará esto como 3 líneas divisorias, no como una con 3 colores distintos.
<hr> con Degradado o Gradient
Por seguir poniendo ejemplos curiosos de <hr>, veremos ahora cómo podemos crear uno con un degradado o gradient horizontal. Te dejo abajo el ejemplo, pero si quieres profundizar más en la temática de creación de degradados mediante CSS, tengo un post sobre ello, te lo dejo por aquí por si quieres echarle un ojo.
hr {
background: #a502ee;
background: linear-gradient(to right, #a502ee, #ffffff, #02fff7);
height: 3px;
}
La verdad es que este tipo de <hr> queda bastante fino y como estamos usando un único <hr> para crear el efecto, la semántica sería más correcta que en algunos de los ejemplos anteriores (en los que hemos usado varios para simular uno de varios colores horizontalmente).
Cambiar el Tipo de Línea
Dado que como has podido ver en varios de los ejemplos anteriores que podemos usar la orden border para definir nuestros <hr>, pues podremos usar border-style para crear líneas divisorias con patrones distintos al habitual; ahora verás.
Comenzaremos de entrada creando una línea creada por muchos puntos:
hr {
border-top: 4px dotted white;
background: transparent;
}
Estamos usando únicamente border-top porque si añadimos border quedará como verás aquí abajo y la verdad es que no queda demasiado bien.
El background transparent es fundamental para que se vean bien los puntos, de lo contrario es como que se crean los puntos sobre una línea recta y el resultado es bastante horrible.
Hay otros border-style disponibles en CSS, pero la verdad es que estos no dan tan buenos resultados en los <hr>, pero puedes darle mejor uso a esta propiedad y todas sus opciones en los border estándar.
Por aquí lo dejaremos por hoy, la verdad es que no me esperaba que acabase añadiendo semejante cantidad de ejemplos de distintas líneas divisorias, pero me parece que el resulta final es bastante interesante.
Para finalizar, lo de siempre, si tienes alguna duda o quieres comentarme algo, ya sabes, ¡deja tu comentario! ¡Hasta otra!
He probado muchos proveedores de hosting a lo largo de mi carrera y este es sin ninguna duda el que más te recomiendo de todos ellos. Además, si adquieres algún plan de hosting con mi enlace me estarás ayudando enormemente ya que me darán una comisión por ello.
Más información aquí.
Que bien explicado todo…estoy empezando en este campo de paginas web, no dudaré en preguntar más dudas. Gracias
¡Me alegro de haber sido de ayuda! Claro, cualquier duda aquí estoy. ¡Gracias a ti por comentar! ¡Eres el primer comentario que no es spam de todo el blog!
Buena la explicación. Bien detallada. Gracias y necesitaré de su experiencia con bastante frecuencia.
¡Gracias a ti por los ánimos Leo!
Buenisima explicacion, estoy en un curso de web y para consultar algunas cosas que no las da el profe viene genial!!
¡Gracias Ariel! ¡Me alegro de que te venga bien!