15 ideas con CSS para las líneas de división hr | Oloblogger Es fácil hacer una línea de división entre dos elementos de una página. Para eso sólo hace falta teclear <hr/> y ya se genera una, pe...

15 de enero de 2013

15 ideas con CSS para las líneas de división hr

Es fácil hacer una línea de división entre dos elementos de una página. Para eso sólo hace falta teclear <hr/> y ya se genera una, pero quizás nunca habías pensado que como a cualquier otro elemento HTML, a las barras de división se les puede aplicar CSS para darles otro aspecto.

La forma más habitual consiste en quitarles el borde, darles algo de espacio (asignando un height) y añadiéndole una imagen de fondo con esa altura. Eso se hace mediante algo similar a este código que debería insertarse en nuestra hoja de estilo:

hr {
border: 0;
height: 20px;
background:url("URL_IMAGEN") no-repeat;
}

Para esto ya vimos en otro post cómo conseguir un buen puñado de imágenes bastante originales, pero ahora lo que haremos será prescindir de ellas sin renunciar a algo de estética gráfica.


Primero he puesto el resultado y después el código que habría que usar en cada caso. He intentado que cada una tuviera una pequeña característica distinta de las otras, pero por supuesto que se pueden combinar varias de ellas y complicarlo como se quiera.

Se agradecerían variantes adicionales a las propuestas porque muchas cabezas dan más de sí que una sola y el content da mucho juego.

Todas juntas las podéis ver también en este Dabblet y quede claro que los colores son sólo para distinguirlas un poco más...





hr {border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:0;}


hr {border: 1px dashed grey; height: 0; width: 60%;}


hr {border: 1px solid red; height: 2px; width: 70%;}


hr {border: 2px solid khaki; height: 2px; background-color: darkkhaki;}


hr {border: 0 ; border-top: 4px double blue; width: 90%;}


hr {border: 2px inset #eee; height: 1px; width: 80%;}


hr {border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px orange;}


hr {border: 0; height: 0; box-shadow: 0 1px 5px 1px purple;}


hr {border: 0; height: 2px; border-top: 1px dashed black; border-bottom: 1px dashed black;}


hr {border: 0; height: 2px; text-align: center; background-image: linear-gradient(left, #fff, #000, #fff);}


hr {border: 3px solid #666; border-radius: 300px/10px; height: 0px; text-align: center;}


hr {border: 0; height: 0; text-align: center;font-size: 24px; line-height: 24px; text-align: center;}
hr:after {content:"\25ca\00a0\25ca\00a0\25ca\00a0\25ca"; position: relative; top: -12px; color: darkblue;}


hr {border: 0; height: 24px; box-shadow: inset 0 22px 12px -12px green; color: green; text-align: center;}
hr:after {content:"\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605\2600\2605"; font-size: 14px;color: #eee;}


hr {border: 0; height: 0; border-top: 4px double black; text-align:center;}
hr:after {position: relative; top: -22px; content:"\25cf\25cf\25cf"; font-size: 34px;line-height: 34px; color: black;}


hr {border: 0; height: 4px; margin-top: 20px;background-image: linear-gradient(left, #fff, red, #fff); text-align: center;}
hr:after {content:"<hr/>"; position: relative; top: -12px; display: inline-block; width: 36px; height: 24px; padding: 0;border: 2px solid red; border-radius: 24px; background: red; color: white; font-size: 12px; line-height: 24px; }

Nota: Agregar prefijos a border-radius y a linear-gradient para una mayor compatibilidad con los distintos navegadores.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

44 comentarios :

  1. Gracias por este post es fantástico,es increíble los estilos que se les puede dar a los separadores. Gracias :)

    ResponderEliminar
  2. Hola. No sé si pregunto una burrada... ¿Se podría hacer que CONTENT en lugar de un símbolo(s) o imagen sea el valor de un determinado contador o nunca se podrá indicar ahí que busque y tome un valor numérico de una variable? Muchas gracias

    ResponderEliminar
    Respuestas
    1. Sí que se puede, pero necesitas una caja contenedora dónde resetear el contador. Sería lo mismo de antes más esto:

      .post-body {counter-reset: contador;}
      hr:after {content: counter(contador);counter-increment: contador;}

      Si los hr van dentro de un post, necesariamente irán dentro de la caja post-body y por eso usé esa, aunque en cada caso habría que buscar cuál es la más conveniente.

      Eliminar
  3. Consulta Master Oloman, si yo no edito mi css (en código) antes de poner el hr, puedo meter el tag con style?

    Porque no me está tomando el diseño en blogger. :(
    Me sale el hr "básico", es obvio que algo estoy metiendo mal.

    Podrías poner un ejemplo por favor en caso de que no usemos muy seguido los "hr", y sea para casos excepcionales.
    Gracias

    ResponderEliminar
    Respuestas
    1. < hr style='border: 1px dashed grey; height: 0; width: 60%;' />

      Eliminar
    2. Perfecto, me asceleré.
      Dsps de unos intentos lo logré.
      Gracias de nuevo!

      Eliminar
  4. no entendí el proceso podría especificarlo mejor

    ResponderEliminar
    Respuestas
    1. El proceso es añadir el código de la línea de división que quieres en tu hoja de estilo. En Blogger sería entre las etiquetas SKIN. Luego para que salga en un post, sólo tendrías que añadir un <hr/>

      Eliminar
  5. Yo estoy tratando de usar esta en un foro de foroactivo!
    hr {border: 0; height: 2px; text-align: center; background-image: linear-gradient(left, #fff, #000, #fff);}
    Pero al parecer el "left" no me lo toma y si se lo quito el codigo funciona pero el degradado no se realiza desde las puntas como muestra el ejemplo, alguien sabe porque no funciona esto?

    ResponderEliminar
    Respuestas
    1. Disculpá, este comentario era para tí. No se por qué razón no se publicó como respuesta :(

      Saludos

      Eliminar
    2. A Oloman no le molesta que compartáis aquí cosas interesantes o respuestas a las dudas de otro ;)

      Eliminar
  6. Hola amigo, espero a Oloman no le moleste que te responda.
    Para usar el linear-gradient, te recomiendo probar así:

    hr {border:0; height:2px; text-align:center;background-image:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#FFFFFF), to(#FFFFFF), color-stop(.5,#333333))}

    Prueba y me avisas.

    ResponderEliminar
    Respuestas
    1. No entendí bien, se ve complicado... Pero que funciona funciona eso es innegable jaja muchas gracias ya daba por perdida la solución, pasa que no había vuelto a visitar el sitio.
      Mas que agradecido y espero que sigan asi!!

      Eliminar
  7. Hola!
    No entiendo muy bien como se hace , me gustaría poner una imagen separadora en las entradas tanto fuera como dentro y la que me interesa son la línea de los puntitos para separarlas , pero no se ni como se empieza poner el código , alguna ayuda? Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Si lograra entender lo que quieres exactamente seguramente te podría ayudar, pero lo de la "imagen" separadora, cuando esto no son imágenes y la expresión "tanto fuera como dentro", me confunden bastante
      ¿Un ejemplo? ¿Una captura de pantalla? ¿Un esquema para verlo?

      Eliminar
  8. perdon pero yo quiero poner la barra que va asi | me dijeron que va con la etiqueta hr

    ResponderEliminar
    Respuestas
    1. La barra HR es horizontal y esa que tú dices es vertical. Además es un símbolo del teclado que acabas de poner ¿cual es la pregunta exactamente?

      Eliminar
  9. Oloman, el efecto me aparece pero aparece una linea delgada al principio del widget y al final del mismo una mas gruesa que es la que deseo que solo se visualice, me podria ayudar?

    ResponderEliminar
  10. ¿Y cómo puedo hacerlo si no puedo verlo? :(

    ResponderEliminar
  11. ya puedes visualizarlo en mi blog
    http://rockandmetalcassic.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Pero ¿dónde tienes puesta la HR? No veo ninguna

      Eliminar
    2. lo aplique en la sidebar para separar los widgets.

      Eliminar
    3. Ahí no hay ningún HR.
      Muchas veces es difícil adivinar qué queréis, pero en esta ocasión creo que es esto:
      Quita entera la línea que forma el BORDER de este trozo que encontrarás en tu plantilla:
      .sidebar .widget {
      border: 1px inset;
      color: #333333;
      }

      Eliminar
  12. No consigo que me funcione el hr. Quiero insertar una imagen, y éste es el código que pongo:

    hr{
    border:none;
    height:30px;
    background:url(http://elrincondemixka.com/wp-content/uploads/2015/06/hr1.jpg) no-repeat;
    }

    Y no se modifica... ¿Cuál puede ser el problema? ¿Qué hago mal?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Pon entre comillas la direccion y "height" debe de tener el tamaño exacto o un poco que el de la imagen para poder visualizarla

      Eliminar
  13. Prueba con border:0; y poniendo la dirección de la imagen entre comillas.

    ResponderEliminar
  14. Hola Oloman, me gustaria preguntar como se puede poner barras separadoras y espacios entre las entradas del blogger, no entiendo como funciona el hr para poner que salga una imagen de barra espaciadora y que se separen los recuadros de cada entrada.

    Mi blogger es: http://magicweapon.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Nono

      Son cosas distintas lo de las barras HR que son para poner separando texto u otras cosas dentro de un post y lo que me dices que necesitas que es una separación entre post.

      Sin embargo observo que tus entradas ya aparecen separadas, pues cada una está enmarcada con un borde y además con un color de fondo blanco, distinto del general que visualmente también las separa.

      Eliminar
  15. Excelente ayuda, muchas gracias por compartir!

    ResponderEliminar
  16. Hola, quisiera saber si es posible mantener el separador de entradas y quitarlo este de las páginas estáticas y dinámicas al final de las mismas, en el caso del blog tuyo no aparece nada al final y antes de "inicio y flechas atras y adelante) tengo la plantilla simple RWD tuya. Gracias y saludos.

    ResponderEliminar
    Respuestas
    1. A ver... si te refieres a una línea horizontal que me ha parecido ver justo antes de los iconos de flechas y casa (para recientes/antiguas), eso está en la plantilla como un HR.

      Si lo quieres quitar de todas partes simplemente elimina ese HR de tu plantilla:
      <hr style='align:center; background:#000000; border:0px; height:1px; width:100%;'>

      Si lo quieres quitar de cierto tipo de páginas, entonces simplemente engloba ese HR dentro de una condición, según desees.

      Eliminar
    2. La condición sería sólo en la portada del blog... Pero mi torpeza me ha impedido lograrlo... Si puedes ponerme la condición... Gracias.

      Eliminar
    3. Gracias, ya lo conseguí, con anterioridad no había puesto bien el condicional y gracias al comentario tuyo até cabos.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
  17. Hola, disculpa pero yo quiero saber como poner la linea vertical, y poder modificar el grosor y color, me explico, yo la quiero usar para ponerla al principio de determinados párrafos de los textos de mis entradas, estuve buscando y no consigo como hacerlo vertical solo veo horizontal, podrías darme el código si sabes cual es, y explicarme que hacer, disculpa pero apenas estoy aprendiendo. Gracias.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Yo quiero que se vea como al principio de una cita, con la linea vertical que ocupa el principio de todo el párrafo pero sin las comillas, la inclinación en las letras y demás, solo me interesa la linea vertical y poder personalizar el color.

      Y si pudiera ponerlo por html donde redacto mis entradas, seria mejor porque no entiendo todavía mucho de eso de CSS.

      Gracias.

      Eliminar
  18. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  19. hola buen dia primeramente agradecerte por la pagina esta genial, aprovecho para ver si puedes orientarme copie tu codigo de la penuntima linea en donde sale las barras con tres circulos negros (content:"\25cf\25cf\25cf")pero podrias decirme por que ahora no se ven en la pagina web?

    ResponderEliminar
  20. Buenas Oloman, una pregunta, supongo que puedo poner varios estilos en mi css en plan hr1{} hr2{}, etc... pero, ¿como los referencio luego para elegir que estilo tiene cada una de mis barras dentro de una misma página?
    Muchas gracias.

    ResponderEliminar
  21. este blog es muy bueno mejor muchos en ingles que se ofrecen como guia

    ResponderEliminar
  22. Hola Oloman ...!
    Sé que estás muy ocupado..en horabuena::!
    te agradezco mucho por compartir tu conocimiento.
    Exito en tus proyectos..!
    Atentos saludos desde Ecuador.

    ResponderEliminar