Gliederungstext in HTML

Dieser Artikel stellt eine Methode vor, um Text in HTML mit Hilfe von CSS zu skizzieren.

Verwenden Sie die CSS-Eigenschaft text-shadow, um einen Umriss für Text in HTML bereitzustellen

Der text-shadow ist eine CSS-Eigenschaft, die dem Text einen Schatten hinzufügt. Es nimmt eine durch Kommas getrennte Liste von Schatten als Werte und jeder Schatten enthält X-Offset, Y-Offset, Unschärferadius und Farbe.

Wenn ein Text zum Beispiel eine Tet-Schatten-Eigenschaft von 1px 1px 3px schwarz hat, bedeutet dies, dass der Textschatten des Textes einen X-Offset von 1px, einen Y-Offset von 1px und einen Unschärferadius von hat 3px und hat schwarze Farbe. X-Offset und Y-Offset sind für die Richtung des Textschattens verantwortlich, und der X-Offset stellt den Schatten in horizontaler Richtung dar, während Y-Offset den Schatten in vertikaler Richtung darstellt.

Der Unschärferadius definiert den Abstand vom Text, bis zu dem der Schatten unscharf werden soll. Um dem Text einen vollständigen Umriss zu geben, müssen wir mehrere Werte für Textschatten einstellen, da der Text in alle Richtungen einen Umriss hat.

Erstellen Sie zum Beispiel ein <div> und schreiben Sie zufälligen Text hinein und geben Sie dem <div> den Klassennamen outline. Wählen Sie in CSS die Klasse outline aus.

Setzen Sie die Eigenschaft color auf white. Als nächstes setzen Sie die Eigenschaft text-shadow von div auf -1px -1px 0 #000, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black.

Hier haben wir vier Wertepaare für die Eigenschaft text-shadow angewendet. Es erstellt den Umriss des Textes in alle Richtungen, und wir haben 0 für den Unschärferadius verwendet, da wir nicht möchten, dass der Text unscharf wird.

Der offsets-Wert akzeptiert auch einen negativen Wert. Der negative Wert für den X-Offset erzeugt den Schatten zur linken Seite, während der negative Y-Offset den Schatten zum oberen Rand des Textes erzeugt.

Wir setzen auch die Farbe des Textes auf Weiß und den Schatten auf Schwarz, damit der Text und die Kontur auf dem weißen Hintergrund sichtbar sind.

Code - HTML:

<div class="outline">
 Text shadow can be used to give an outline to the text.
</div>

Code - CSS:

.outline {
  color: white;
  text-shadow:
               -1px -1px 0 black,
                1px -1px 0 black,
               -1px 1px 0 black,
                1px 1px 0 black;
}

So können wir die CSS-Eigenschaft text-shadow verwenden, um den Text in HTML zu umreißen.