7.1 text-decoration Eigenschaft
CSS bietet verschiedene Eigenschaften zur Stilisierung und Dekoration von Text auf Webseiten. Die Eigenschaften text-decoration,
text-transform und text-shadow ermöglichen das Hinzufügen von Unterstreichungen, das Ändern der Groß-/Kleinschreibung und das Erzeugen von Schatten, was hilft,
den Text ausdrucksvoller und ansprechender zu gestalten.
Die Eigenschaft text-decoration steuert die dekorativen Effekte des Textes, wie Unterstreichungen, Überstriche und
Durchstreichungen. Es ermöglicht auch, die Farbe und den Stil der Linien, die zur Dekoration des Textes verwendet werden, einzustellen.
Werte:
none: entfernt alle Textdekorationenunderline: unterstreicht den Textoverline: fügt eine Linie über dem Text hinzuline-through: fügt eine Linie durch den Text (Durchstreichung) hinzublink: Text blinkt (nicht von allen Browsern unterstützt)text-decoration-color: legt die Farbe der Dekorationslinie festtext-decoration-style: legt den Stil der Linie fest (solid, double, dotted, dashed, wavy)text-decoration-thickness: legt die Dicke der Dekorationslinie fest
Verwendungsbeispiel:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Dieser Text ist unterstrichen.</p>
<p class="overline">Dieser Text ist überstrichen.</p>
<p class="line-through">Dieser Text ist durchgestrichen.</p>
<p class="custom-decoration">Dieser Text ist mit einer welligen roten Linie unterstrichen.</p>
</body>
7.2 text-transform Eigenschaft
Die Eigenschaft text-transform steuert die Umwandlung von Text, indem sie die Groß-/Kleinschreibung von Buchstaben ändert. Dies ist nützlich
für die automatische Umwandlung von Text in Überschriften, Kleinbuchstaben usw.
Werte:
none: keine Umwandlungen (Standardwert)capitalize: Der erste Buchstabe jedes Wortes wird groß geschriebenuppercase: Alle Buchstaben werden groß geschriebenlowercase: Alle Buchstaben werden klein geschriebenfull-width: wandelt den Text in volle (doppelte) Breite um (nicht von allen Browsern unterstützt)
Verwendungsbeispiel:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">dieser text wird mit großem buchstaben für jedes wort sein.</p>
<p class="uppercase">dieser text wird vollständig in großbuchstaben sein.</p>
<p class="lowercase">DIESER TEXT WIRD VOLLSTÄNDIG IN KLEINBUCHSTABEN SEIN.</p>
</body>
7.3 text-shadow Eigenschaft
Die Eigenschaft text-shadow fügt dem Text einen Schatten hinzu, was es ermöglicht, visuelle Effekte zu erzeugen
und die Lesbarkeit des Textes auf der Webseite zu verbessern.
Werte:
<offset-x>: Versatz des Schattens entlang der X-Achse (horizontal)<offset-y>: Versatz des Schattens entlang der Y-Achse (vertikal)<blur-radius>: Unschärferadius des Schattens (optional)<color>: Farbe des Schattens (optional)
Verwendungsbeispiel:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Dieser Text hat einen Schatten.</p>
<p class="multiple-shadows">Dieser Text hat mehrere Schatten.</p>
</body>
Erklärung des Codes:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: fügt einen Schatten mit horizontalem Versatz von 2px, vertikalem Versatz von 3px, Unschärferadius von 4px und halbtransparentem schwarzem Farbton hinzutext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: fügt zwei Schatten mit unterschiedlichen Parametern hinzu, um einen komplexeren visuellen Effekt zu erzeugen
GO TO FULL VERSION