Wie man Text in Ränder mit grundlegenden HTML-Elementen einfügt

Einige HTML-Elemente kommen mit voreingestellten Designs, wie die unhandlich kleinen Quadrate von <input type="checkbox">-Elementen, die begrenzten Farbbalken von <meter>-Elementen und die Pfeile von <details>-Elementen, bei denen man sich denkt: "Irgendetwas stimmt mit denen nicht". Wir können sie so gestalten, dass sie zur modernen Ästhetik unserer Websites passen und gleichzeitig ihre Funktionalität nutzen. Es gibt auch viele Elemente, die selten als *sowohl* ihr Standardaussehen als auch ihre Funktionalität gebraucht werden, da sie in modernen Webdesigns weniger benötigt werden.

Ein solches HTML-Element ist <fieldset>, zusammen mit seinem Kindelement <legend>.

Ein <fieldset>-Element wird traditionell verwendet, um Formularsteuerelemente zu gruppieren und darauf zuzugreifen. Wir können die Gruppierung visuell durch das Vorhandensein eines Rahmens um den gruppierten Inhalt auf dem Bildschirm erkennen. Die Beschriftung für diese Gruppe wird innerhalb des <legend>-Elements angegeben, das als erstes Kind des <fieldset>-Elements hinzugefügt wird.

Diese Kombination aus <fieldset> und <legend> erzeugt ein einzigartiges, fertiges "Text im Rahmen"-Design, bei dem die Beschriftung genau dort platziert wird, wo der Rahmen ist, und die Linie des Rahmens nicht durch den Text verläuft. Die Rahmenlinie "bricht", wenn sie auf den Anfang des Beschriftungstextes trifft, und setzt sich nach dem Ende des Textes fort.

In diesem Beitrag werden wir die Kombination aus <fieldset> und <legend> verwenden, um ein moderneres Design für Rahmen mit Text zu erstellen, das schnell und einfach zu codieren und zu aktualisieren ist.

Für die vier Ränder benötigen wir vier <fieldset>-Elemente, die jeweils ein <legend>-Element enthalten. Wir fügen den Text, der an den Rändern erscheinen soll, in die <legend>-Elemente ein.

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

Zuerst stapeln wir die <fieldset>-Elemente übereinander in einer Gitterzelle und geben ihnen Ränder. Sie können sie stapeln, wie Sie möchten - es muss nicht unbedingt ein Gitter sein.

Nur der obere Rand jedes <fieldset>-Elements bleibt sichtbar, während die restlichen Kanten transparent sind, da der Text des <legend>-Elements standardmäßig am oberen Rand des <fieldset>-Elements erscheint.

Außerdem geben wir allen <fieldset>-Elementen die Eigenschaft box-sizing mit dem Wert border-box, sodass die Breite und Höhe der <fieldset>-Elemente ihre Rahmen- und Polstergrößen einschließen. Dies später zu tun, schafft ein ebenmäßiges Design, wenn wir die <legend>-Elemente gestalten.

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; 
}

Danach drehen wir die letzten drei <fieldset>-Elemente, um ihre oberen Ränder als Seiten- und untere Ränder unseres Designs zu verwenden.

/* 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); }

Als Nächstes gestalten wir die <legend>-Elemente. Der Schlüssel zur Erstellung eines glatten Rahmentextes mit einem <legend>-Element ist, ihm eine line-height von Null (oder klein genug) zu geben. Wenn es eine große Zeilenhöhe hat, wird dies die Position des Rahmens, in dem es sich befindet, verschieben und den Rahmen nach unten drücken. Und wenn sich der Rahmen mit der Zeilenhöhe mitbewegt, können wir nicht alle vier Seiten unseres Designs verbinden und müssen die Ränder neu einstellen.

legend {
  font: 15pt/0 'Averia Serif Libre'; 
  margin: auto; /* to center */
  padding: 0 4px; 
}

fieldset:nth-of-type(3) > legend { 
  transform: rotate(180deg);
}

Ich habe die Kurzschreibweise font verwendet, um die Werte für die Eigenschaften font-size, line-height und font-family der <legend>-Elemente anzugeben.

Das <legend>-Element, das den Text am unteren Rand unseres Designs hinzufügt, fieldset:nth-of-type(3)>legend, ist aufgrund seines rotierten übergeordneten <fieldset>-Elements umgedreht. Drehen Sie dieses <legend>-Element vertikal, um seinen Text aufrecht anzuzeigen.

Fügen Sie dem ersten <fieldset>-Element ein Bild hinzu und Sie erhalten etwas wie das hier

Seitenränder können den Text entlang des Rahmens verschieben. Linke und rechte Ränder mit auto-Werten zentrieren den Text, wie im obigen Pen zu sehen ist. Nur der linke Rand mit einem auto-Wert schiebt den Text nach rechts und umgekehrt für den rechten Rand.

Bonus: Nach einem kurzen geometrischen Umweg, hier ist ein achteckiges Design, das ich mit der gleichen Technik erstellt habe