Cómo agregar texto en los bordes usando elementos HTML básicos

Algunos elementos HTML vienen con diseños preestablecidos, como los incómodos cuadrados pequeños de los input type="checkbox"elementos, las barras de colores limitados de meterlos elementos y las flechas de los elementos que dicen “algo en ellos me molesta” details. Podemos diseñarlos para que coincidan con la estética moderna de nuestros sitios web mientras utilizamos sus funcionalidades. También hay muchos elementos que rara vez se utilizan, ya que tanto su apariencia como su funcionalidad son menos necesarios en los diseños web modernos.

Uno de esos elementos HTML es fieldset, junto con su elemento secundario legend.

Un fieldsetelemento se utiliza habitualmente para agrupar y acceder a controles de formulario. Podemos notar visualmente la agrupación por la presencia de un borde alrededor del contenido agrupado en la pantalla. El título de este grupo se proporciona dentro del legendelemento que se agrega como primer hijo de fieldset.

Esta combinación de fieldsety legendcrea un diseño único de “texto en borde” listo para usar donde el título se coloca justo donde está el borde y la línea del borde no atraviesa el texto. La línea del borde se “rompe” cuando encuentra el comienzo del texto del título y se reanuda después de que termina el texto.

En esta publicación, usaremos el combo fieldsety legendpara crear un diseño de texto de borde más moderno que sea rápido y fácil de codificar y actualizar.

Para los cuatro bordes, necesitamos cuatro fieldsetelementos, cada uno de los cuales contiene un legendelemento en su interior. Agregamos el texto que aparecerá en los bordes dentro de los legendelementos.

fieldsetlegendWash Your Hands/legend/fieldsetfieldsetlegendStay Apart/legend/fieldsetfieldsetlegendWear A Mask/legend/fieldsetfieldsetlegendStay Home/legend/fieldset

Para comenzar, apilamos los fieldsetelementos uno encima del otro en una celda de la cuadrícula y les damos bordes. Puedes apilarlos de la forma que quieras; no necesariamente tiene que ser una cuadrícula.

Solo el borde superior de cada fieldsetelemento se mantiene visible mientras que los bordes restantes son transparentes ya que el texto del legendelemento aparece en el borde superior de fieldsetforma predeterminada.

Además, le damos a todos los fieldsetelementos una box-sizingpropiedad con un valor de border-boxpara que el ancho y el alto de los fieldsetelementos incluyan también sus tamaños de borde y relleno. Hacer esto más tarde crea un diseño nivelado, cuando diseñamos los legendelementos.

body {  display: grid;   margin: auto; /* to center */  margin-top: calc(50vh - 170px); /* to center */  width: 300px; height: 300px; }fieldset {  border: 10px solid transparent;   border-top-color: black;   box-sizing: border-box;   grid-area: 1 / 1; /* first row, first column */  padding: 20px;   width: inherit; }

Después de esto, rotamos los últimos tres fieldsetelementos para usar sus bordes superiores como bordes laterales e inferiores de nuestro diseño.

/* rotate to right */fieldset:nth-of-type(2){ transform: rotate(90deg); }/* rotate to bottom */fieldset:nth-of-type(3){ transform: rotate(180deg); }/* rotate to left */fieldset:nth-of-type(4){ transform: rotate(-90deg); }

El siguiente paso es diseñar los legendelementos. La clave para crear texto con bordes suaves usando un legendelemento es darle un cero (o lo suficientemente pequeño) line-height. Si tiene una altura de línea grande, eso desplazará la posición del borde en el que se encuentra, empujando el borde hacia abajo. Y cuando el borde se mueve con la altura de la línea, no podremos conectar los cuatro lados de nuestro diseño y necesitaremos reajustar los bordes.

legend {  font: 15pt/0 'Averia Serif Libre';   margin: auto; /* to center */  padding: 0 4px; }fieldset:nth-of-type(3)  legend {   transform: rotate(180deg);}

Utilicé la fontpropiedad abreviada para dar los valores de font-sizey line-heightlas font-familypropiedades de los legendelementos.

El legendelemento que agrega el texto en el borde inferior de nuestro diseño, fieldset:nth-of-type(3)legendestá al revés debido a su fieldsetelemento principal girado. Voltee ese legendelemento verticalmente para mostrar su texto boca arriba.

Agrega una imagen al primer fieldsetelemento y obtendrás algo como esto:

Los márgenes laterales pueden mover el texto a lo largo del borde. Los márgenes izquierdo y derecho con autovalores centrarán el texto, como se ve en el lápiz de arriba. Sólo el margen izquierdo con un autovalor desplazará el texto hacia la derecha, y viceversa, para el margen derecho.

Bonificación: después de un breve diseño geométrico, aquí hay un diseño octogonal que hice usando la misma técnica: