Algunos elementos HTML vienen con diseños preestablecidos, como los cuadrados inconvenientemente pequeños de <input type="checkbox"> elementos, las barras de color limitado de <meter> elementos, y las flechas “algo sobre ellos me molesta” del <details> elementos. Podemos diseñarlos para que coincidan con la estética moderna de nuestros sitios web mientras hacemos uso de sus funcionalidades. También hay muchos elementos que rara vez se utilizan, ya que tanto su apariencia predeterminada como su funcionalidad son menos necesarias en los diseños web modernos.
Uno de esos elementos HTML es <fieldset>, junto con su elemento hijo <legend>.
A <fieldset> El elemento se utiliza tradicionalmente 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 encuentra dentro del <legend> elemento que se agrega como el primer hijo de la <fieldset>.
Esta combinación de <fieldset> y <legend> crea un diseño único de “texto en borde” listo para usar en el que 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 de la leyenda y se reanuda después de que termina el texto.
En esta publicación, haremos uso de la <fieldset> y <legend> combo para crear un diseño de texto de borde más moderno que sea rápido y fácil de codificar y actualizar.
Para las cuatro fronteras, necesitamos cuatro <fieldset> elementos, cada uno con un <legend> elemento interior. Agregamos el texto que aparecerá en los bordes dentro del <legend> elementos.
<fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>Para empezar, apilamos el <fieldset> elementos uno encima del otro en una celda de cuadrícula y darles bordes. Puede apilarlos de la forma que desee, no necesariamente tiene que ser una cuadrícula.
Solo el borde superior de cada uno <fieldset> elemento se mantiene visible mientras que los bordes restantes son transparentes ya que el texto de la <legend> El elemento aparece en el borde superior del <fieldset> por defecto.
Además, damos todos los <fieldset> elementos a box-sizing propiedad con un valor de border-box por lo que el ancho y la altura de la <fieldset> Los elementos también incluyen sus tamaños de borde y relleno. Hacer esto más tarde crea un diseño nivelado, cuando le damos estilo al <legend> elementos.
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 <fieldset> elementos 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); }Lo siguiente es diseñar el <legend> elementos. La clave para crear un texto de borde suave usando un <legend> elemento 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 mueva con la altura de la línea, no podremos conectar los cuatro lados de nuestro diseño y tendremos que 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);
}Usé el font propiedad abreviada para dar los valores de la font-size, line-height y font-family propiedades de la <legend> elementos.
El <legend> elemento que agrega el texto en el borde inferior de nuestro diseño, fieldset:nth-of-type(3)>legend, está al revés debido a su rotación <fieldset> elemento padre. Voltea eso <legend> elemento verticalmente para mostrar su texto hacia arriba.
Agrega una imagen a la primera <fieldset> elemento y obtienes algo como esto:
Los márgenes laterales pueden mover el texto a lo largo del borde. Márgenes izquierdo y derecho con auto Los valores centrarán el texto, como se ve en el lápiz anterior. Solo el margen izquierdo con un auto value colocará el texto a la derecha, y viceversa, para el margen derecho.
Prima: Después de un breve desvío geométrico, aquí hay un diseño octagonal que hice usando la misma técnica: