13 maneras estupendas de personalizar el separador hr

11.10.14


Si quieres hablar de temas distintos dentro de un mismo post, necesitas poner un separador hr de texto, que por supuesto lo puedes personalizar a tu gusto.
¿Cómo lo haces?

¿Con puntitos o rayitas?

Espero que no!

Si aún no conoces el <hr> te lo presento! Es fantástico!


¿Cómo utilizo la etiqueta <hr>?

Así de fácil y así de simple.

Cuando quieras poner una separación con una línea, pon el código <hr> en el código HTML de tu post y listo.  Te quedará así.



Si, tienes razón! Debes pensar que esto es un poco aburrido para tu blog!

Tu quieres algo con más color, forma y personalizado, ¿verdad?

De acuerdo, te ayudo a tunearlo, que así es un poco soso!

Lo que verás a continuación son varias maneras que tienes de personalizar la etiqueta <hr>.

Cuando hayas escogido el código que más te gusta para tu barra separadora deberás añadirlo al código CSS de tu blog (Plantilla --> Personalizar --> Avanzado --> Añadir CSS).

Aquí te muestro maneras diferentes que tienes de poner a tu gusto una barra separadora.

Las diferentes propiedades las puedes combinar a tu gusto, para crear tu propio <hr>.


Hacer <hr> más estrecho

Lo puedes hacer de dos maneras distintas, a pesar de que te recomiendo que lo hagas con pocentages, para no tener sorpresas si algún día quieres hacer una plantilla para móvil o responsive.

Usando píxeles


 hr{ 
   width:300px;
 }


O con porcentages


 hr{ 
   width:50%;
 }


Y quedará así



Poner color a <hr> y hacerlo más alto

En algunos navegadores la propiedad color no funciona. Como en Chrome.

En vez de ello aquí debes utilizar el background-color.

Para hacer la línea ancha, simplemente aumentas su altura.

En el ejemplo está puesto a 5px, pero puedes hacerla tan alta o tan estrecha cómo quieras.



 hr{ 
   height:5px;  
   background-color:#ff0000; 
 }


Quedará así



Quitar el borde de <hr>

¿Te has fijado que encima de la línea roja hay una pequeña línea negra

Es muy fina, pero se nota!

Esto es porqué <hr> por defecto crea un borde superior.

Lo puedes quitar poniendo border:none;



 hr{ 
   height:5px; 
   background-color:#ff0000; 
   border:none; 
 }


Así mejor, ¿verdad?



Puntitos en el borde <hr>

También puedes darle un poco de estilo, poniendo rayitas o puntitos.


  hr { 
    border: 1px dashed #278e79; 
  }


Quedaría así


O también puedes utilizar dotted para el borde, entonces te queda así



 hr { 
   border: 1px dotted #278e79; 
 }




Altura y borde <hr>

Ahora si haces la barra más alta y sólo dejas los bordes, tendrás una cajita.



 hr { 
   border: 1px solid #4bceb4; 
   height: 8px; 
 }

Queda así


Y si quieres lo puedes rellenar de dentro con otro color y hacer el borde más ancho.



 hr { 
   border: 2px solid #4bceb4; 
   background-color: #ffff00; 
   height: 8px; 
 }



Quedará así



Dos líneas paralelas

Aquí simplemente lo que puedes hacer es poner altura y mostrar sólo el borde superior y el inferior.


 hr { 
   border-top: 2px solid #4bceb4; 
   border-bottom: 2px solid #4bceb4; 
   border-left:none; 
   border-right:none; 
   height: 6px; 
 }


Quedará así


Como puedes ver sólo se trata de ir combinando propiedades.

Aquí en vez de solid, puedes poner dotted o dashed, como hemos visto antes y las dos lineas te quedarán con puntitos.

El borde también lo puedes hacer más ancho o más estrecho si quieres.

O también un borde de cada tipo como aquí.



 hr { 
   border-top: 3px solid #4bceb4; 
   border-bottom: 2px dashed #4bceb4; 
   border-left:none; 
   border-right:none; 
   height: 6px; 
 }



Lo verás así



Redondear bordes con <hr>

También se pueden redondear los bordes de la manera siguiente. Ten en cuenta que puedes/debes "jugar" con los valores para obtener el estilo que tu quieras.


 hr { 
   border: 5px solid #4bceb4; 
   border-radius: 300px ; 
   height: 0px; 
   text-align: center; 
 }

Quedarás así, utilizando la propiedad border-radius


También se pueden dar valores verticales y horizontales para cada esquina del borde. Mira que elegante!



 hr { 
   border: 5px solid #4bceb4; 
   border-radius: 200px /8px; 
   height: 0px; 
   text-align: center; 
 }



Se ve así



Imagen repetida de fondo en <hr>

Aquí he creado una imagen sencilla (en este caso de 20px cuadrada) y se repetirá horizontalmente en todo el ancho del post.



Debes buscar la URL de tu imagen (la pones en una entrada nueva, vas a HTML y copias la URL) y pegarla en el siguiente código donde pone URL DE TU IMAGEN.

Fíjate que en el cógido pone repeat, que indica que debe repetir la pequeña imagen en todo el ancho del <hr>.

Puedes jugar con el valor del ancho de la barra (width) para que no te quede cortado ningún dibujo.



 hr { 
  height: 20px; 
  background:url(URL DE TU IMAGEN) repeat center; 
  border: none; 
 }


Y quedará así de chulo



Imagen no repetida de fondo en <hr>

Puedes crear una imagen con las medidas del ancho de tus post y la altura que más te convenga.

Sólo tienes que ponerla entera, sin que se repita.





 hr { 
   height: 30px; 
   width:600px; 
   background: url(URL DE TU IMAGEN) no-repeat center; 
   border: none; 
 }




Ahora ya puedes personalizar tu separador a tu gusto.

Con la cantidad de opciones que has visto para adaptar el separador hr, seguro que encuentras alguna que te guste.

¿Tú utilizabas puntos o rallas para separar texto dentro de un post? ¿Conocías el separador <hr> antes? ¿Te han gustado las personalizaciones que has visto? Me encanta que me dejen comentarios y los contesto todos con mucho gusto. Nos vemos allí!

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.