Text-Transform
Die Kunst der Schriftverwandlung
Mit einem Fingerschnipsen und etwas CSS-Magie kannst du die Groß- und Kleinschreibung deiner Texte nach Lust und Laune verändern. Ein Zauber, der deinen Worten das gewisse Etwas verleiht. Du kannst sie in majestätischen Großbuchstaben strahlen lassen oder ihnen mit geschmeidigen Kleinbuchstaben eine sanfte Note geben, ohne den Text von vorneherein so zu schreiben.
Es ist, als würdest du einer sehr mächtigen Überschrift ein Krönchen aufsetzen oder deinen Satz in einen flüsternden Geheimtipp verwandeln. Die Möglichkeiten sind unendlich – und wer weiß, vielleicht bittet deine Überschrift demnächst höflich um einen Tee und plaudert dabei über ihren neuen Stil!
Schrift mit Charakter
Gib deinem Text Persönlichkeit!
Großbuchstaben
Das laute Rufen
Großbuchstaben sind wie Marktschreier, die mit voller Stimme Aufmerksamkeit fordern. Sie verleihen deinem Text eine gewisse Autorität und machen jede Botschaft unübersehbar.
h1 {
text-transform: uppercase;
}Die uppercase-Transformation verwandelt alle Buchstaben eines Textes in Großbuchstaben.
Kleinbuchstaben
Die zarte, intime Note
Kleinbuchstaben flüstern eine geheime Botschaft im Garten. Sie verleihen deinem Text eine vertrauliche, schöne Atmosphäre und bringen eine ruhige Gelassenheit mit sich.
h1 {
text-transform: lowercase;
}Die lowercase-Transformation verwandelt alle Buchstaben eines Textes in zarte Kleinbuchstaben
Jedes Wort großschreiben
Ein Hauch von Eleganz und Rafinesse
Jedes Wort beginnt mit einem kunstvollen Großbuchstaben. Diese Transformation verleiht deinem Text ein Gefühl von edler Sorgfalt und lässt jedes Wort fast wie eine kleine Geschichte wirken.
h1 {
text-transform: capitalize;
}Die capitalize-Transformation verwandelt alle ersten Buchstaben eines Wortes in Großbuchstaben
Kapitälchen
eine Botschaft aus alten Zeiten
Kapitälchen erinnern an antike Inschrift. Sie wirken würdevoll, zeitlos und voller Tradition. Sie verleihen deinem Text einen Hauch von klassischer Eleganz, als wäre er in Stein gemeißelt.
h1 {
font-variant: small-caps;
}Hier werden Kleinbuchstaben in kleinere Großbuchstaben verwandelt, während die eigentlichen Großbuchstaben ihre Größe beibehalten
In dieser Lektion hast du gelernt…
- Wie du mit
text-transform: uppercasealle Buchstaben in Großbuchstaben verwandelst, um Aufmerksamkeit und Autorität zu erzeugen. - Warum
text-transform: lowercaseeine sanftere, ruhigere Wirkung hat, indem es alle Buchstaben in Kleinbuchstaben umwandelt. - Wie
text-transform: capitalizeden ersten Buchstaben jedes Wortes groß schreibt, um einen eleganten und raffinierten Look zu erzielen. - Warum
font-variant: small-capsklassische Kapitälchen erzeugt, um Texten eine würdige und traditionelle Ausstrahlung zu verleihen. - Wie du mit diesen Textstilen gezielt Emotionen und Stilrichtungen steuerst, um deinen Textcharakter an die gewünschte Wirkung anzupassen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Runen der Veränderung
In den geheimen Pfaden gibt es Tafeln, die sich nach Belieben verändern – fast so, als ob sie ihre eigenen Launen hätten. Um die Magie hinter diesen Wandlungen zu begreifen, musst du lernen, wie man Text digital verwandelt. Mit CSS kannst du die Runen zum Leben erwecken, indem du die Schrift transformierst und in neue Formen bringst – und wer weiß, vielleicht flüstern sie dir dabei noch ein Geheimnis zu.
Deine Aufgabe: Die Anwendung von Texttransformationen
- Groß- und Kleinschreibung (text-transform)
Verwende die Klasse .uppercase, um den Text in Großbuchstaben (uppercase) anzuzeigen, und .lowercase, um den Text in Kleinschrift (lowercase) darzustellen. - Erste Buchstaben groß schreiben (capitalize)
Setze die Klasse .capitalize ein, um jeden ersten Buchstaben eines Wortes großzuschreiben. - Kapitälchen (font-variant: small-caps)
Verwende die Klasse .small-caps und setze die Eigenschaft font-variant auf small-caps.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.small-caps {
font-variant: small-caps;
}
.lowercase {
text-transform: lowercase;
}