>Home<

Textgestaltung

CSS

-Letterpress-Effekt-

HTML-Beispiel:

So benutzt Du den Stil direkt im HTML:

htm

<h2 class="text-effect">Willkommen</h2>

Letterpress

Der vollständige CSS-Code:

Übernehme den CSS-Code in Deine CSS-Datei.

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
color: #b9b9b9; 		/* Schriftfarbe Hellgrau */
text-shadow: 			/* Textschatten mit zwei Schatten */
1px 1px #ffffff, 		/* weißer Schatten rechts unten */
-1px -1px #313131; 		/* dunkler Schatten links oben */
}

Erklärung der einzelnen Stilregeln:

CSS-Eigenschaft	Erklärung
`font-family: Georgia;`	Die Schriftart Georgia wird verwendet.
`font-size: 35px;`	Die Schrift ist 35 Pixel groß.
`font-weight: bold;`	Der Text wird fett dargestellt.
`font-style: italic;`	Kursive Schrift.
`color: #b9b9b9;`	Die Schriftfarbe ist Hellgrau.
`text-shadow:`	Verleiht dem Text einen 3D-Effekt durch zwei Schatten: `1px 1px #ffffff` → weißer Lichtschein unten rechts. `-1px -1px #313131` → dunkler Schatten oben links.

-Emboss-Effekt-

Emboss

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
color: #b9b9b9; 		/* Schriftfarbe Hellgrau */
text-shadow: 			/* Textschatten mit zwei Schatten */
-1px -1px #ffffff, 		/* weißer Schatten links oben */
1px 1px #313131; 		/* dunkler Schatten rechts unten */
}

-Schatten-Effekt-

Emboss

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
color: #000000; 		/* Schriftfarbe Schwarz */
text-shadow: #000000 -0.1em 0.1em 0.2em; /* Schwarzer Schatten, leicht versetzt mit Weichzeichnung */
}

-Glühender-Effekt-

Glühender Text

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
background: #000000; 		/* Schwarzer Hintergrund */
color: #00ff0f; 		/* Schriftfarbe Neongrün */
text-shadow: 			/* Grüner Leuchteffekt als Schatten */
0 0 0.2em #00ff0f, 		/* erster grüner Leuchteffekt */
0 0 0.2em #00ff0f; 		/* zweiter grüner Leuchteffekt */
}

-Über-und unterstrichen-

Dieser Text ist über- und unterstrichen

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
text-decoration: overline underline; /* Text mit Überstrich und Unterstrich */
}

- Anfangsbuchstabe hervorheben-

Überschriften mit

Anfangsbuchstaben hervorheben

css

 h1 {
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-family: 'Playfair Display', serif; /* Schriftart Playfair Display, alternativ Serif */
color: #bddaf8; 		/* Hellblau Schriftfarbe */
font-style: italic; 		/* Kursivschrift */
text-shadow: #72abaa 1px 1px; 	/* Schatten in Türkis, 1px rechts unten versetzt */
}

h1:first-letter {
font-size: 50px; 		/* Erste Buchstabe größer (50 Pixel) */
letter-spacing: 5px; 		/* Abstand zwischen Buchstaben vergrößert */
color: #f5d3f8; 		/* Hellrosa Farbe */
font-family: 'Great Vibes', cursive; /* Andere Schriftart für den ersten Buchstaben */
text-shadow: #d53ada 1px 1px; 	/* Schatten in Pink, 1px rechts unten versetzt */
}

Erklärung der einzelnen Stilregeln:

Bereich	Was passiert hier?	Tipp
`h1`	Das ist Deine Hauptüberschrift. Wir machen sie hellblau, kursiv und geben ihr einen Schatteneffekt.	Du kannst `font-size`, `color` oder `font-family` nach Deinem Stil ändern.
`h1:first-letter`	Nur der erste Buchstabe bekommt eine besondere Schriftart und wird noch größer & auffälliger.	Ideal für Logos, Magazin-Stil oder elegante Seiten.
`Google Fonts`	Damit die Schriftarten überall funktionieren, laden wir sie online über `<link>` im `<head>` nach.	Du kannst andere Schriftarten über fonts.google.com ausprobieren.

-Rahmen-

Text im Rahmen

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
outline: 5px double black; 	/* Doppellinien-Rahmen außen, 5 Pixel dick, schwarz */
}

-Mehren Schatten-

Text mit mehren Schatten

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
color: #000000; 		/* Schriftfarbe Schwarz */
text-shadow: 			/* Mehrfacher bunter Schatten für 3D-Effekt */
0.2em 0.5em 0.1em #11b4cf, 	/* hellblauer Schatten leicht rechts unten */
-0.3em 0.1em 0.1em #11cf18, 	/* grüner Schatten leicht links unten */
0.4em -0.3em 0.1em #6c136f; 	/* lila Schatten leicht rechts oben */
}

-Großschreibung-

Großschreibung

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
text-transform: uppercase; 	/* Text wird komplett in Großbuchstaben umgewandelt */
}

-Konturen-

Konturentext

css

.text-effect {
font-family: Georgia; 		/* Schriftart Georgia */
font-size: 35px; 		/* Schriftgröße 35 Pixel */
font-weight: bold; 		/* Fettschrift */
font-style: italic; 		/* Kursivschrift */
color: #fff; 			/* Weiße Schriftfarbe */
text-shadow: 			/* Schwarzer Schatten rundum für Kontur-Effekt */
0 -1px #000, 			/* Schatten oben */
1px 0 #000, 			/* Schatten rechts */
0 1px #000, 			/* Schatten unten */
-1px 0 #000; 			/* Schatten links */
}

Mit den Text-Effekten habe ich Dir gezeigt, wie man Schatten macht,
damit der Text schöner aussieht und besser zu lesen ist.
So, jetzt bist Du dran – viel Spaß beim Ausprobieren!😊

Das war's auch schon von mir. 😊
Verfasst am 20.April 2007, aktualisiert am 16.Juli 2025

>Web-Coding Tutorials<

>Home<