Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Lösung zur Aufgabe mit Outline-Schrift über text-shadow

Über text-shadow kann jede Schrift, als Outline-Schrift dargestellt werden. Die Schriftfarbe selber, wird weiß und die Schatten werden in der gewünschten Farbe darstellt.

Outline-Schrift über CSS text-shadow erzeugen
Outline-Schrift über CSS text-shadow erzeugen

Dazu gibt es 2 verschiedene Lösungswege.

Als erstes benötigen wir unser Standard-HTML5-Gerüst mit Textinhalt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Outline-Schrift über CSS3 text-shadow</title>
    <link href="css3-loesung-text-shadow.css"
          rel="stylesheet">
</head>
<body>
<h1>Outline-Schrift über CSS3 text-shadow</h1>
</body>
</html>

Im CSS-Bereich gehen wir nun auf die Überschrift los und geben dieser eine größere Schriftgröße mit (damit wir den Effekt beim Textschatten besser sehen). Zusätzlich nehmen wir eine serifenlose Schrift.

h1 {
    font-size: 50pt;
    font-family: sans-serif;
}

Für den Outline Effekt benötigen wir nun den CSS3-Befehl text-shadow, um über den gezielten Einsatz des Textschattens, die Wirkung einer Outline-Schrift zu erzielen. Die Schrift selber bekommt die Schriftfarbe Weiß und der Textschatten bekommt keinen Versatz nach X oder Y.

h1 {
    font-size: 50pt;
    font-family: sans-serif;
    color: white;
    text-shadow: 0 0 5px black;
}

Die Angabe der Härte, von hier im Beispiel 5 Pixel, ist abhängig von der gewählten Schriftgröße. Da einfach mal probieren, was gut aussieht.

Somit haben wir den ersten Lösungsansatz.

Zweiter Lösungsansatz für Outline-Schrift

Eine weitere Variante ist, einfach 4 Schatten zu machen, jeweils mit einem Versatz in einer der Ecken. Zum Vergleich, mit dem ersten Lösungsansatz, machen wir es direkt darunter. Es wird also die HTML-Datei ergänzt um ein <h2>, mit demselben Inhalt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Outline-Schrift über CSS3 text-shadow</title>
    <link href="css3-loesung-2-text-shadow.css"
          rel="stylesheet">
</head>
<body>
<h1>Outline-Schrift über CSS3 text-shadow</h1>
<h2>Outline-Schrift über CSS3 text-shadow</h2>
</body>
</html>

Im CSS-Bereich bekommt die <h2> die gleiche Schriftgröße wie die <h1> – damit wir den Outline-Effekt auch direkt vergleichen können.

h1 {
    font-size: 50pt;
    font-family: sans-serif;
    color: white;
    text-shadow: 0 0 5px black;
}

h2 {
    font-size: 50pt;
    font-family: sans-serif;
    color: white;
}

Der Schatten bekommt nun 4 Richtungen.

h1 {
    font-size: 50pt;
    font-family: sans-serif;
    color: white;
    text-shadow: 0 0 5px black;
}

h2 {
    font-size: 50pt;
    font-family: sans-serif;
    color: white;
    text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
}

Als Lösung erhalten wir dann in aktuellen Browsern folgende Ausgabe:

Outline-Schrift über CSS3: 2 Lösungswege
Outline-Schrift über CSS3: 2 Lösungswege

Oder zum Testen im eigenen Browser:
https://www.html-seminar.de/beispielcode/beispiel-css3-text-shadow.htm

Tipp am Rande, für Sicherheit vor alten Browsern: Da die Schriftfarbe auf diese Art auf jeden Fall umgesetzt wird (sprich weiß), der Schatten über text-shadow nur bei aktuellen Browsern, die CSS3 unterstützen, macht es Sinn (damit weiße Schrift auf weißem Grund vermieden wird, falls es ein alter Browser ist) die Schrift in der HSL-Schreibweise anzugeben (siehe entsprechendes Kapitel am Anfang des CSS3-Kapitels) und vor dieser eine lesbare Farbe für ältere Browser, die dann von neueren Browsern überschrieben wird.

Durch Hintergrundfarbe bzw. ein Hintergrundbild, kann die Outline-Schrift noch stärker zu Geltung kommen.

weitere eigene Projekte: