Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen – Webdesign erstellen » Text mit Schatten » Outline-Schrift per CSS3

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 lang="de">
<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: 2em;
    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: 2em;
    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 lang="de">
<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: 2em;
    font-family: sans-serif;
    color: white;
    text-shadow: 0 0 5px black;
}

h2 {
    font-size: 2em;
    font-family: sans-serif;
    color: white;
}

Der Schatten bekommt nun 4 Richtungen.

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

h2 {
    font-size: 2em;
    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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details