Besonders bei Navigationen möchte man gerne einen Effekt erreichen, bei dem im aktiven Zustand die Begriffe mit Großbuchstaben dargestellt werden, im inaktiven Zustand aber mit normaler Schrift. Das klingt nach komplizierten Effekten, stimmt aber nicht, denn bei CSS ist das ein simpler Befehl. Er kann noch mehr, denn er kann auch den gesamten Text in Kleinbuchstaben anzeigen.
Damit kann man je nach Situation auch verschiedene Zustände auswählen und gerade bei Überschriften oder bei Navigationen mag dies ein sinnvoller Einsatz in der Textgestaltung sein.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Der Befehl lautet text-transform und er kann in der Einstellung capitalize auch dafür sorgen, dass jedes Wort mit einem Großbuchstaben beginnt. Mit "none" schaltet man die Funktion wieder ab und hat die normale Darstellung von Text.
Eingesetzt wird der Befehl in folgender Weise:
text-transform: uppercase;
text-transform: none;
text-transform: capitalize;
Für Navigationen verwendet man gerne die Einstellung uppercase, wodurch der gesamte Text mit Großbuchstaben dargestellt wird. Lowercase ist das Gegenteil und wird als Stilmittel manchmal verwendet.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
ergibt:
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
Die Großbuchstaben wird man wohl am ehesten als Funktion einsetzen. Die capitalize-Funktion ist eine nette Spielerei, die aber eher weniger Einsatzgebiete vorfindet. Text nur mit Kleinbuchstaben anzubieten ist hingegen eine durchaus reizvolle Möglichkeit in der Textbearbeitung.
Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.
Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.
Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.
Themenseiten
Artikel-Thema: Mit CSS und text-transform Text in Großbuchstaben darstellen
Beschreibung: Mit CSS und dem Befehl 👍 text-transform gelingt es einfach, Text umzuwandeln wie etwa in ✅ Großbuchstaben oder in Kapitälchen.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel