in

20 Bonitos diseños hr HTML CSS con CSS personalizados

Si tuvieras que nombrar algunas de las etiquetas HTML más utilizadas desde las primeras versiones de HTML, probablemente acabaría apareciendo en la lista <hr>.

Esta sencilla pero útil etiqueta HTML permite separar contenido en las páginas web con una línea horizontal. Lo bueno es que, gracias a CSS, podemos convertir esas sencillas líneas en formas más complejas y elegantes, incluso animadas, hasta el punto de que no te acaben pareciendo producto de un simple código <hr>. Veamos algunas de ellas:

HR que se convierte en barra de progreso

Esta línea HR se convierte en una barra de progreso cuando pasas el ratón por encima para indicar cuánto llevas leído de la página. El concepto es simple y se puede implementar fácilmente en cualquier parte del sitio web. Ideal para blogs y revistas online.

HR animado con CSS

Esta barra HR aparece con una animación CSS. Incluye diseños de líneas rectas o punteadas. La línea aparece corta y centrada y se va abriendo hacia los lados, aunque puedes personalizar el efecto. La barra se anima cuando haces hover con el ratón o cuando haces scroll en la página.

HR con animación ‘espacial’

Este HR animado con CSS se utiliza como un separador entre la cabecera y el resto del contenido. Una línea fina animada hace aparición quedando bien sobre fondos con imágenes como el del ejemplo que pone el autor.

Hr con puntos

Básicamente, esta línea HR está compuesta por unos puntos grandes, con un diseño simple para quien no necesite grandes complicaciones. El diseño CSS es muy sencillo y fácil de añadirle otros diseños y animaciones.

HR con porcentaje de carga

Este curioso separador HR convierte la clásica línea en un porcentaje de carga con una animación HTML / CSS y algo de código JavaScript. La animación es suave y se ve ideal en aplicaciones de ordenador y de teléfonos móviles, ya que no ocupa demasiado espacio en pantalla. Además permite personalizar el diseño según te haga falta.

Línea HR CSS con gradiente

Esta sencilla línea HR se muestra con un gradiente de colores en lugar de un solo color. Este concepto se puede utilizar fácilmente en cualquier aplicación en ordenadores / teléfonos móviles para sitios web para darle un toque de diseño especial.

Líneas hr animadas

Estas líneas horizontales hr aparecen desde los lados en una animación suave. Ideal no solo como separadores de texto, sino también para resaltar cabeceras u otros elementos en la web añadiendo una en la parte superior y otra en la inferior.

Pack de líneas HR CSS

Este es un set de varios diseños de líneas HR horizontales. En total dispones de 17 líneas con formas diferentes basadas en líneas continuas, onduladas, puntos, y más. Elige la que te guste más y actívala a través del HTML / CSS. Incluso puedes añadir tus propios efectos a las líneas.

HR adornado elegante

Esta elegante línea HR imita a una línea trazada a mano clásica, casi parece que alguien la dibujó con una pluma antigua. Ideal para sitios que quieran darle un toque muy retro o que utilicen fuentes que simulen la escritura a mano. La línea HR está realizada con CSS.

Línea HR con un sol animado

Esta línea HR también incluye una animación, la de un sol giratorio cuyos rayos van dando vueltas alrededor. Puedes usar el código como base para tus propias creaciones y añadir o modificar elementos fácilmente ya que está realizado solo con HTML y CSS.

Línea HR al estilo ‘coche fantástico’

Estas líneas HR están diseñadas al estilo de la serie de tv de ficción ‘El coche fantástico’. Ideales para utilizar sobre un fondo obscuro, ya que la línea HR se muestra con colores brillantes amarillos o rojos con efecto fluorescente. Toda la animación se realiza con CSS, sin sobrecargar demasiado la página web.

Línea HR con ligaduras

Esta línea HR es ideal para los que buscan un diseño retro. Incluye un bonito border y separadores con ligaduras. Están realizadas con CSS3 así que son fáciles de editar para ajustar el diseño a tu gusto.

Reemplazo para línea HR

Si buscas un reemplazo para las líneas HR clásicas, este probablemente te interese. Se utilizan diferentes colores para conseguir llamar la atención visual. Cada zona diferente de color se expande cuando haces hover sobre ellas con el puntero del ratón. Realizada bajo HTLM y CSS3.

Líneas HR con animación

Estas líneas animadas horizontales aparecen y desaparecen desde ambos lados de la pantalla. La animación comienza automáticamente, pero también puedes personalizar el código para que las líneas se animen solo cuando pases el puntero del ratón sobre ellas.

Líneas HR con texto centrado

La principal característica de estas líneas HR es que pueden incluir en su interior un texto centrado de manera que resalte sobre el resto del texto.

Líneas HR alternativas

Este es un paquete de 18 líneas HR alternativas con diseños simples, compuesto por líneas continuas, discontinuas, punteadas y más.

Línea HR interactiva

Esta línea HR es una línea horizontal interactiva ideal para páginas web y blogs. A medida que el usuario hace scroll en la página, la línea se va expandiendo. Está realizada con HTML, CSS y JavaScript.

Pack de estilos HR

Esta es una colección de líneas HR horizontales con diseños poco habituales. Algunas de las líneas incluyen pequeñas imágenes o iconos, textos y otros elementos llamativos visualmente. Se les puede añadir fácilmente algunas animaciones para hacer las líneas más atractivas o personalizar los diseños.

HR con CSS personalizado

Esta es una colección de varias líneas HR con CSS personalizado. Se incluyen varios tipos de líneas horizontales separadoras, incluyendo algunas con formato oblícuo o diagonal.

Línea HR con texto en el centro

Esta línea horizontal puede incluir un texto en el centro, ideal no solo como línea separadora, también como cabecera llamativa.

Línea HR con imagen en el centro

En lugar de un texto, esta línea HR utiliza código CSS para incluir una imagen en el centro. Ideal para destacar zonas en pantalla. Permite personalizarse fácilmente incluyendo efectos de animación y esquemas de colores.

Línea HR vertical

En este caso, lo que encontramos aquí es una línea HR con orientación vertical en lugar de horizontal. Con uno poco de codificación CSS, se ha conseguido que la línea aparezca verticalmente. Ideal para separar contenidos diferenciados por columnas.

Written by webgenio