Lädt...

CSS Text-Effekte

Sie können bereits ausrichten, verzieren und Schriften laden. Text-Effekte legen Politur darüber — ein weicher Schatten, eine Ellipse bei wenig Platz oder ein Umbruch für sperrige lange Strings. Halten Sie sie leicht, damit der Text lesbar bleibt.

Ein kleines Effekte-Toolkit

📊 Text-Effekte auf einen Blick

Werkzeug Alltagsjob
text-shadow Weiche Tiefe oder Glow hinter Glyphen (Offset, Blur, Farbe)
text-overflow Wie abgeschnittener Text endet — oft ellipsis (…)
overflow + white-space Partner, die Ellipsis braucht (hidden + nowrap)
overflow-wrap Lange Wörter/URLs so umbrechen, dass sie in die Box passen
writing-mode Text in eine andere Richtung laufen lassen (z. B. vertikal)

Effekte sind Würze, nicht das Gericht. Eine Überschrift mag einen ruhigen Schatten; ein langer Absatz braucht selten Feuerwerk.

text-shadow — Offset, Blur, Farbe

Die Reihenfolge ist meist horizontaler Offset, vertikaler Offset, Blur-Radius, dann Farbe. Kleine Werte wirken ruhig; riesiger Blur verwischt die Buchstaben.

Einfaches text-shadow

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Geschichtete Schatten

Sie können mehrere Schatten kommagetrennt listen — nützlich für einen weichen Lift ohne harte Kontur.

Zwei weiche Lagen

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

Ellipsis, wenn Text zu breit ist

text-overflow: ellipsis funktioniert nur mit einem Clipping-Setup: typisch overflow: hidden und white-space: nowrap auf einer Box mit begrenzter Breite.

Ellipsis auf schmalem Label

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — lange Wörter zähmen

Eine lange URL oder ein ununterbrochener String kann eine schmale Spalte sprengen. overflow-wrap: break-word (älterer Alias word-wrap) erlaubt dem Browser, bei Bedarf innerhalb des Wortes zu brechen.

Lange Strings umbrechen

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — ein vertikaler Blick

writing-mode ändert, wie Zeilen fortschreiten. Vertikale Werte eignen sich für Seitenlabels oder dekorative Titel — nicht für Alltagstext.

Vertikaler Text-Blick

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

Eine ruhige Überschriften-Gewohnheit

Ein weicher Schatten auf einem kurzen Titel reicht oft. Schweres Glow auf Fließtext vermeiden und Ellipsis nur dort, wo Platz wirklich knapp ist.

Leichte Titel-Politur

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Selbst ausprobieren

  1. Weiches text-shadow auf eine Überschrift (kleine Offsets, moderater Blur).
  2. Zweiten helleren Schatten per Komma stapeln.
  3. Ellipsis-Label bauen: max-width, overflow: hidden, nowrap, ellipsis.
  4. Lange URL in schmale Box und overflow-wrap: break-word.
  5. writing-mode: vertical-rl auf kurzem Seitenlabel — dann zurück zum normalen Lesen.

Häufige Fehler

  • Neon-Mehrfachschatten auf langen Absätzen (schwer lesbar)
  • text-overflow: ellipsis ohne overflow: hidden und nowrap
  • Jedes Wort mit aggressivem word-break zerlegen, obwohl overflow-wrap reicht
  • Vertikales writing-mode für ganze Artikel
  • Diese Lektion mit @font-face / Webfont-Laden vermischen (vorherige Lektion)

Kurzfassung

  • text-shadow nutzt Offset, Blur und Farbe — Werte bescheiden halten
  • Mehrere Schatten können für einen weichen Lift geschichtet werden
  • Ellipsis braucht overflow, nowrap und eine Breitengrenze
  • overflow-wrap hilft langen Wörtern und URLs
  • writing-mode ist Spezialwerkzeug; Alltagstext bleibt horizontal

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 29 von 35
Css Tutorial