Devitácora

Los fieldset son unas de mis etiquetas HTML favoritas por su apariencia, pero lamentablemente fue pensada exclusivamente para agrupar campos de un formulario. Esto no te detiene a usarlas a tu antojo, pero no se verá bien; es como sentarte en una mesa, no fue hecha para ello.

En la red hay un sinnúmero de alternativas que emulan este elemento, pero con las que me he topado suelen fallar en una cosa: flexibilidad. Estas se estropean cuando se necian las propiedades de legend, cuando el ancho del documento se reduce drásticamente o se vuelven un dolor de cabeza al intentar obtener su altura mediante JavaScript.

Siguiendo el hilo de la anterior entrada, quise intentarlo empleando contenedores flexibles, más la ayudita de la propiedad CSS transform, y he aquí el resultado, el cual puedes ver acción en esta página.

A veces los títulos no se ven tan bien entre tanta sobriedad, como cuando están centrados y hay mucho espacio a su alrededor, por lo que uno busca la manera de maquillarlo para resaltar su impresión. Uno de mis métodos preferidos es estilizándolo con una línea detrás, pero nunca me ha gustado la manera en cómo se suele hacer, empleando etiquetas HR y posiciones absolutas. He aquí una forma más sencilla utilizando contenedores flexibles:

El CSS básico sería el siguiente:

Mientras que el HTML luciría algo así: