 Schlagschatten 02
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 02 - Schatteneffekt durch überlagerte Texte
Hier im Beispiel 02 wird die Position der Texte relativ, in Bezug auf das vorherige (darüber notierte) Element der Seite bestimmt. Für ein Beispiel mit absoluter Positionierung (in Bezug auf die linke obere Ecke des Windows) besuchen Sie meine Seite mit den Erklärungen zur absoluten Positionierung
 Schlagschatten 01 - Text mit Schatten 01
Text relative Positionierung
Text relative Positionierung
Sie müssen meine Erklärungsversuche zur Funktion ja nicht bereits heute verstehen um das Beispiel auf Ihren Seiten einzusetzen. Öffnen Sie die Quellcode-Datei und kopieren die Codezeilen in Ihre Seite. Ändern Sie den Text, fertig.
Funktion
Um eine solche Darstellung zu erzielen lege ich diese beiden Texte mit CSS-Anweisungen beinahe übereinander:
Text relative Positionierung
Text relative Positionierung
Die beiden Texte werden im Fließtext des HTML-Codes der Seite an dem Ort notiert, wo der Schattentext erscheinen soll. Es wird eine Position in Relation zum davor notierten Seitenelement bestimmt. Das geschieht durch CSS-Anweisungen im Head-Bereich der HTML-Datei.
position:absolute;
top:0px;
left:0px;
|
position:absolute;
top:1px;
left:1px;
|
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.
Notierungen
Position und Formatierung werden durch CSS-Notierungen im Head-Bereich festgelegt. Im Body-Bereich werden lediglich die <DIV>-Bereiche und Texte notiert.
Zur Realisierung dieses Beispiels habe ich eine andere CSS-Technik als im Beispiel 01 eingesetzt. Ich verwende die Eltern- / Kind-Elemente Technik der Vererbung von Eigenschaften auf untergeordnete, abhängige Elemente.
Im Body-Bereich:
Durch die Art der Notierung sind die Elemente der Klasse 'Text1' und 'Text2' Kindelemente des Elternelements mit der ID 'Emboss'. Die Regeln des Elternelements werden auf die Kindelemente vererbt! Das bedeutet die Regeln von 'Emboss' gelten auch für die Elemente der Klasse 'Text1' und 'Text2'.
Hintergrundwissen CSS-Grundlagen Seite 06 - Kaskadierung und Vererbung
a) Im HEAD-Bereich:
Ich schaffe eine Regel für das Element mit der ID 'Emboss', in der ich die für beide Texte identischen Formatierungsanweisungen festlege.
Außerdem schaffe ich Regeln für die Elemente mit der Klasse 'Text1' und 'Text2', in der ich für die beiden Texte unterschiedline Formatierungsanweisungen festlege.
<style type="text/css">
<!--
#Emboss {
font-family: Verdana,Arial,Helvetica,sans-seif;
font-size: 30px;
line-height: 50px;
padding-bottom:50px;
position:relative;
}
#Emboss .Text2 {
position:absolute;
top:0px;
left:0px;
color: #FF8450;
}
#Emboss .Text1 {
position:absolute;
top:1px;
left:1px;
color: #2F2F2F;
}
-->
</style>
Während die Position für 'Emboss' sich mit 'absolute' auf das übergeordnete Seitenelement bezieht (ohne Angaben mit 0 Pixel Abstand), bezieht sich die Position der Kindelemente 'Text1' und 'Text2' mit 'absolute' auf das Elternelement 'Emboss'.
b) Im Body-Bereich:
<DIV>-Bereiche und Texte notieren.
<div id="Emboss">
<div class="Text1">Text relative Positionierung</div>
<div class="Text2">Text relative Positionierung</div>
</div>
Anpassungen
Durch Anpassung der Farben und der Positionsangaben können Sie eigene Schriftbilder entwickeln. Ändern Sie die X- / Y- Angaben für die relative Positionsbestimmung um Schattenschriften oder Prägungschriften (Emboss) zu erzielen.
gelber Schattentext
gelber Schattentext
Für diesen Text habe ich folgende Notierung in die Seite geschrieben:
<div id="Schatten">
<div class="Text1">gelber Schattentext</div>
<div class="Text2">gelber Schattentext</div>
</div>
Im Head-Bereich wurden diese Anweisungen notiert:
<style type="text/css">
<!--
#Schatten {
font-family: Verdana,Arial,Helvetica,sans-seif;
font-size: 30px;
line-height: 50px;
padding-bottom:50px;
position:relative;
}
#Schatten .Text2 {
position:absolute;
top:1px;
left:1px;
color: #FFE237;
}
#Schatten .Text1 {
position:absolute;
top:0px;
left:0px;
color: #AFAFAF;
}
-->
</style>
|
Home • CSS • Text mit Schatten
BEISPIEL
Quellcode