Textschatten mit CSS3

Das neue CSS3 macht für so manchen Einsatzfall bei der Webseiten-Gestaltung die Verwendung eines Grafikprogramms überflüssig, da es mit zahlreichen Grafikeffekten aufwartet. Das folgende Beispiel zeigt, wie Sie auf einfache Weise einen Textschatten erzeugen.

Um einen Text grafisch mit einen Schatten zu hinterlegen ist der folgende Quelltext in den <Head> – Bereich einzubauen:

<style type="text/css">
.shadow {
text-shadow: #23e411 4px 4px 2px;
}
</style>

Das folgende Bild zeigt die einzelnen Werte der text-shadow – Eigenschaft.

shadow_code

.shadow definiert hierbei die CSS-Klasse und kann beliebig benannt werden.
text-shadow ist die zu verwendende Eigenschaft für den Textschatten gefolgt von der Angabe der Schattenfarbe, des horizontalen Versatz, des vertikalen Versatz sowie von der Schattenstärke. Die Schattenfarbe wird in der üblichen hexadezimalen Form angegeben und der Versatz in Pixel. Um den Schatten nach links zu versetzen oder nach oben zu versetzen müssen negative Werte eingegeben werden. Die Schattenstärke kennzeichnet wie scharf oder verschwommen der Schatten gezeichnet wird.

Im folgenden Bild ist das Ergebnis des Quellcodes in der Darstellung im Firefox 3.6 zu sehen mit den angegebenen Koordinatenrichtungen (positive Werte für y kennzeichnen einen Versatz nach unten).

Shadow_Sample

Leider werden die neuen Eigenschaften von CSS3 noch nicht von allen Browsern verstanden. Das hier vorgestellte Beispiel funktioniert mit Firefox, Chrome, Safari und Opera. Mit dem Internet Explorer wird die Darstellung vermutlich in der Version 9 möglich sein.

2 Kommentare

    1. Du hast Recht. Beispiele sind ein wenig kurz gekommen bis auf das Bild. An sich braucht man aber nur den Quelltext kurz kopieren und in eine HTML-Seite einbauen und schon ist ein Beispiel fertig.

Schreibe einen Kommentar zu Daniel Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert