Nur mit HTML und CSS kann man einer Schrift ganz einfach einen schönen Outline-Effekt geben: Einen farbigen Rand um die Text-Zeile herum. Das passt gut für Überschriften, aber auch für Text, der auf einem Bild platziert werden soll und dann so aussehen könnte wie in dem Beispiel-Screenshot oben. Für die CSS Outline definiert man dafür einfach einen Schatten um die Schrift – aber in alle vier Richtungen!
Zunächst definieren wir hier eine Klasse “Outline”, die man später dann zum Beispiel der Überschrift zuweisen kann:
<style stype="text/css">
.outline {
color:#FFF;
text-shadow: 1px 1px 1px #000,
1px -1px 1px #000,
-1px 1px 1px #000,
-1px -1px 1px #000;
}
</style>
<h1 class="outline">Überschrift</h1>
Die Outline-Klasse enthält als Textfarbe den Wert “weiß” (#FFF oder #FFFFFF) und als Schatten in alle vier Richtungen den Wert “schwarz” (#000 oder #000000). Möchte man die CSS Outline um den Text weniger stark haben, kann man hier einen Grauwert einsetzen, zum Beispiel #E1E1E1. Natürlich funktioniert aber auch jeder andere Farbwert für den Rand um den Text, den man stattdessen in der Outline-Klasse definiert!
CSS Outline: So sieht sie aus:
Outline-Text mit CSS