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 tec...

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

30 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
  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