HTML + CSS: Einfache Outline um den Text!

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