 Schlagschatten 01 absolute Positionierung
Hier spreche ich nicht von einem CSS-Filter für eine transparente Grafik wie: filter:Shadow(). Das kann zur Zeit nicht jeder Browser. Nein ich lege 2 Texte leicht versetzt übereinander, damit das wie ein Schatten aussieht.
|
|
Text mit Schatten - Schatteneffekt durch überlagerte Texte
Diese beiden Texte lege ich mit CSS-Anweisungen beinahe übereinander:
Schattenschriftzug
Schattenschriftzug
Durch die minimalen Unterschiede der Positionen, wird der dunklere Text leicht versetzt angezeigt. Da der hellere Text den dunkleren überlagert, sind nur noch 'Schattenränder' zu sehen. Position und Formatierung werden durch CSS-Notierungen festgelegt.
Hier im Beispiel 01 wird die Position der Texte absolut, in Bezug auf die linke obere Ecke des Fensters bestimmt. Für ein Beispiel mit relativer Positionierung (in Bezug auf das vorherige Seitenelement) besuchen Sie meine Seite
 Schlagschatten 02 - Text mit Schatten 02 (gerade in Arbeit, 23.06.2010 18:00 Uhr)
absolute Positionierung
Zur absoluten Positionierung der Texte wurden die X-Y-Koordinaten eingetragen.
Beispiel hier Text1: Position x = 100 px und Position y = 232 px
Beispiel hier Text2: Position x = 102 px und Position y = 230 px
Vorteil: Punktgenaue Positionierung in Bezug auf die linke obere Ecke des Browserfensters. Der Schattenschriftzug kann andere Seitenelemente überlagern, aus Sicht des Betrachters vor dem dahinter liegenden Seiteninhalt angezeigt werden.
Nachteil: Soll der Schattenschriftzug keine andern Elemente der Seite überlagern, muss ein entsprechend großer Raum freigehalten werden.
a) Verfahren 1
Position und Formatierung werden durch CSS-Notierungen im Head-Bereich festgelegt. Im Body-Bereich werden lediglich die beiden <DIV>-Bereiche für die Texte notiert.
Im HEAD-Bereich:
ID festlegen, Position und Formatierung bestimmen. Die Rangfolge (welches Elemet vorne oder hinten steht) wir hier durch die Angabe mit 'z-index:' festgelegt.
<style type="text/css">
<!--
#Text2 {
position: absolute;
z-index: 2;
top:230px;
left:100px;
font-family: Arial,Helvetica,sans-seif;
font-size: 40px;
color: #FFDF00;
};
#Text1 {
position: absolute;
z-index: 1;
top:232px;
left:102px;
font-family: Arial,Helvetica,sans-seif;
font-size: 40px;
color: #8F8F8F;
};
-->
</style>
Im Body-Bereich:
<DIV>-Bereiche für die Texte notieren.
<div id="Text1">Schattenschriftzug</div>
<div id="Text2">Schattenschriftzug</div>
b) Verfahren 2
Die Position wird durch CSS-Notierungen im Head-Bereich festgelegt. Die Formatierung der Texte wird durch CSS-Inlineformatierungen im Body-Bereich festgelegt.
Im HEAD-Bereich:
ID festlegen und Position bestimmen
<style type="text/css">
<!--
#Text1 {position: absolute; z-index:1; top:232px; left:102px;}
#Text2 {position: absolute; z-index:2; top:230px; left:100px;}
-->
</style>
Im Body-Bereich:
<DIV>-Bereiche für die Texte + Inline-Formatierungsbefehle
<div id="Text1">
<h1 style="color:#FFDF00;font-size:40px;">
Schattenschriftzug
</h1>
</div>
<div id="Text2">
<h1 style="color:#8F8F8F;font-size:40px;" >
Schattenschriftzug
</h1>
</div>
|
Home • CSS • Text mit Schatten
BEISPIEL
Quellcode