SchreibMalWas

Textschatten

" Seit CSS 3 giebt es die Möglichkeit, in HTML-dokumenten Textabschnitte mit Textschatten zu versehen.
Nutzen sie diese Möglichkeit jedoch nur zur optimalen Ausschmückung, da sie bisher nicht von allen Webbrowsern unterstützt wird.

Wichtige Info:
Sie können die Vorschau folgender Code's nur betrachen, wenn sie eine neue Version ihres Browsers mit CSS2.1-Unterstützung benutzen. Wenn Sie noch den Internetexplorer benützen, raten wir ihnen, auf Firefox umzusteigen.

Code:
<h1 id="schatten">Text mit schatten</h1>
<style type="text/css">
#schatten{text-shadow:green 3px 2px 4px;}
</style>
Vorschau:

Text mit schatten

Erklärung:
Hier wird das Element mit der ID="schatten" mit einem grünen, 3px nach rechts und 2px nach unten Schatten mit 4px Verwischungsbereich versehen.

Sie können einem Element auch mehrere Schatten zuweisen. Trenne Sie hierzu einfach die Angaben mit Kommatas:
Code:
<h1 id="schatten2">Text mit schatten</h1>
<style type="text/css">
#schatten2{text-shadow:green 3px 2px, red -1px -10px 15px;}
</style>
Vorschau:

Text mit schatten

Erklärung:
Hier wird das Element mit der ID="schatten2" mit einem grünen, 3px nach rechts und 2px nach unten versetzen Schatten mit ohne Verwischungsbereich
und einem roten, 1px nach links und 10px nach oben versetzten Schatten mit 15px Verwischungsbereich  versehen.

Mit eine Wenig getrickse können sie auch scheinbare Rahmen erstellen, welche die Buchstaben "umlaufen":
Code:
<h1 id="schatten3">Text mit schatten</h1>
<style type="text/css">
#schatten3{text-shadow:black -1px -1px, black -1px 1px, black 1px 1px, black 1px -1px; color:yellow; letter-spacing:1px;}
</style>
Vorschau:

Text mit schatten

Erklärung:
Bei diesem Text werden 4 Schatten in der Farbe Black mit je ein wenig Versetzung zum Text erstellt.
Der 1. Schatten geht nach oben links, der 2. Schatten geht nach unten links, der 3. Schatten geht nach unten rechts und der 4. Schatten geht nach oben rechts.
Als Kontrast wird die Schrift gelb eingefärbt und damit die Buchstaben nicht zusammenkleben wird ein Zeichenabstand von 1x festgelegt.

Im Folgenden habe ich noch einige nützliche und interesante Schatteneffekte aufgelistet:
Diese Beispiele sind ohne Erklärung, da diese ja im Grunde immer die selbige ist.

in bearbeitung

<h1 id="schatten4"></h1>
<style type="text/css">
#schatten3{text-shadow:black -1px -1px;}
</style>





Kommentar zu dieser Seite hinzufügen:
Ihr Name:
Ihre Homepage:
Ihre Nachricht:

Sie sind der 28687 Besucher auf Schreibmalwas-homepagetools Statistiken
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
"