3x bewertet

text-shadow

von Kittey  |  17.11.2009 um 21:10 h
Codeschnipsel
Typ: Codeschnipsel
Stufe:Einfach
In diesem Tutorial erkläre ich euch wie man sogar Textschatten mit CSS erstellen kann!

Als aller erstes erstellt du dir eine einfach index.html, in der du folgendes einfügst:

<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Code-Beispiel für text-shadow</title>
</head>
<body> dein Text bla bla bla
</body>
</html>

Danach schreiben wir noch folgends in den head Bereich rein:

<style type="text/css">
.text-shadow {text-shadow: #e86060 3px 3px 5px;}
</style>


Text-shadow wird dann mittels
<p class="...">

eingebunden und zwar schreiben wir jetzt zwischen den body Tag folgendes:


<body>
<p class="text-shadow">Der Text in diesem Absatz soll
einen grauen Schatten nach rechts unten werfen
mit Überblendeffekt.</p>
</body>


Nun müsste es in eurer Datei so aussehen:

Bild


In der CSS könnt ihr natürlich auch eine andere Farbe als Schatten nehmen, indem ihr bei #e86060 einfach einen anderen Hexalcode reinschreibt, wie z.b. #c0c0c0. Man kann die Schatten Farbe einfach nach seinem Geschmack anpassen :) bei 3px 3px 5px könnt ihr mit den Werten ein bisschen ausprobieren. Umso höher die px Zahl umso weiter is der Schatten vom Absatz entfernt.

Ich hoffe ihr habt bis hier hin alles verstanden!
Bei Fragen oder Problemen schreibt mir doch eine Mail an plueschi_89@hotmail.com



4 Kommentare




Murderprincess

Schönes Tutorial ;)
Ne kleine Verbesserung wäre, wenn du erklärt hättest wofür genau die drei Zahlen stehen. Abstand oben? Links? Rechts? Unten?
So muss man ewig rumprobieren bis man es so hat, wie man es gerne hätte.
Aber schöner Effekt. Läuft der in allen Browsern?
am 19.11.2009 um 13:33 Uhr


Kittey

in fast allen ausser im IE und Netscape ˆˆ
am 19.11.2009 um 17:34 Uhr


Sasuke

Schönes Tutorial echt cool Smilie Smilie
am 20.11.2009 um 15:33 Uhr


Mauri

Echt tolles Tutorial :)
Heutzutage ist dieses text-Sahdow wohl ziemlich In. Ich hab viele Grafik-Seiten gesehen, wo die leute das auch benutzen. Und ich werde es demnächst auch bei meinen Webseiten verwenden. Es ist soo cool ˆ_ˆ
am 03.06.2010 um 21:04 Uhr