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