Semánticamente, un elemento
sigue siendo apropiado. Puede hacer mucho para diseñar esto en más que un elemento genérico.
Estos provienen del mundo de la impresión (donde comencé con hojas de pica y lápices de cera con reglas de recorte …). A menudo eran dos líneas finas o una gruesa y una delgada. En ese momento, fueron referidos como “Reglas de Harvard”. La forma en que la compañía del anuario los definió:
- ¿Qué cosas puedo mejorar en esta página de inicio?
- ¿Hay algún curso de desarrollo web?
- ¿Cómo filtran los filtros web cada página web?
- Cuando trabajo en un cajero automático con una GUI (y un servidor web en la parte posterior), ¿por dónde empiezo con el servidor web?
- ¿Cómo conectar dos bases de datos MySQL en diferentes sistemas? ¿Cómo hago la replicación de la base de datos?
Una línea de regla estándar es cualquier línea impresa que tenga menos de dos picas de ancho. Estas líneas de regla también pueden agregar variedad a su página. Los pesos de línea de regla comunes son uno, dos, tres, seis, nueve y doce puntos. Las líneas de regla están destinadas a unir elementos de diseño, no a separarlos. Una línea de regla de Harvard es dos líneas paralelas, con una línea más ancha que la otra. Los anchos estándar son uno, tres, seis, nueve y 12 puntos. Cuando se usa como borde, la línea delgada generalmente está adentro.
(como referencia, hay 72 puntos en una pulgada, y 12 puntos hacen una pica, por lo que seis picas en una pulgada)
Entonces, comencemos a tratar de convertir el aburrido HR en algo que se vea bien (y no sea una etiqueta div no semántica y horrible)
Eso hace que nuestra hora no tenga el tamaño de nada y se deshaga del estilo HTML 1 feo predeterminado que ha persistido a lo largo del tiempo como un fondo de pantalla eterno en la casa de su abuela.
Vamos a diseñarlo con CSS ahora, ¿de acuerdo?
h {
/ * Fingir una regla de Harvard * /
color: #fff; / * El color de tu página * /
color de fondo: #fff; / * El color de tu página, de nuevo * /
altura: 2px; / * este es el espacio en blanco entre las líneas * /
borde: 0; / * esto elimina los bordes izquierdo y derecho * /
borde superior: 4px sólido #aaa;
borde inferior: 1px sólido #aaa;
}
Puede voltearlo para obtener la línea pequeña en la parte superior o hacer la línea de doble línea delgada también.
Ve y multiplica.
