En ocasiones es necesario agregar alguna linea separadora, por ejemplo para separar los artículos ó los párrafos de algún contenido, para definir el estilo a estas barras existen distintas técnicas. Sin embargo hace poco vi algunas en CSS tricks que me gustaron:
Ejemplos HR con solo CSS en la página de CSS-Tricks
Me gusto el hecho que solo requieren de puro Código CSS y con el HTML solo le damos estilo a dicha separadores, haciendo con esto una implementación bastante eficiente.
Especialmente me gusto la propuesta de Tomas Theunissen (el estilo con las borde redondos) y también me gusto el estilo de Harry Roberts (el que tiene el simbolo § en el centro).
Haciendo una combinación El diseño web es como recetas de cocinas puedes combinarnas y con esto obtener nuevas recetas
Vamos hacer una barra híbrida entre ambos estilos propuestos, como se muestra a continuación:
Para conseguir esto es necesario re-utilizar el código CSS y generar el siguiente:
/* Vamos a definir una barra separadora con el estilo de propuesto
* por: Tomas Theunissen combinado con el de Harry Roberts
*
* Para mayor información: http://css-tricks.com/examples/hrs/
* */
hr.separador_post {
height: 30px;
border-style: solid;
border-color: #BFBFBF;
border-width: 2px 0 0 0;
border-radius: 20px;
text-align: center;
}
hr.separador_post:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
hr.separador_post:after {
content: '★';
color: #DC5500;
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
El código anterior define la clase separador_post, el cual tiene bordes redondos al cual le agregue como símbolo una estrella de color anaranjada. Ahora solo faltaría agregar el siguiente código Html para usarla:
<hr class='separador_post'/>
Sin Comentarios
Puedes ser el primero en comentar.