nicht angemeldet
Hallo allerseits,
ich habe mal ein wenig mit Textschatten herumexperimentiert. Es gibt mehrere Wege, um einen Schatten für einen Text zu erzeugen.
-----
<div style="position:absolute; color:#CCCCCC; z-index:2;">Text wirft Schatten</div>
<div style="position:relative; top:-3px; left:-3px; z-index:3;">Text wirft Schatten.</div>
-----
Doch leider funktioniert dies nicht in jeder Kombination mit anderen HTML-Blockelementen. :-(
Microsoft hatte natürlich zum Thema ein eigenes Süppchen gekocht:
-----
<p style="width:100%; filter:Shadow(color=#999999, direction=135)">Text wirft Schatten</p>
-----
Aber das funktioniert woanders überhaupt nicht, klar. Deshalb habe ich mal weitergesucht. Es sollte so flexibel und einfach wie möglich sein und auf den verschiedenen Browsern gleich aussehen - mit anderen Worten die eierlegende Wollmilchsau. Dabei kam folgendes heraus:
-----
<html>
<head>
<style type="text/css"><!--
body { background-color:#FFFF00; }
.sha { color:#CCCC00; line-height:1em; margin-bottom:0em; margin-left:0.2em; }
.dow { color:#000000; line-height:1em; margin-top:-1.2em; margin-left:0em; }
--></style>
</head>
<body>
<p class="sha">Text mit Schatten</p>
<p class="dow">Text mit Schatten</p>
<table border="1">
<tr>
<td align="left">Links</td>
<td align="center" nowrap>
<h1 class="sha">Shadow On The Wall</h1>
<h1 class="dow">Shadow On The Wall</h1>
<p>Schatten auf der Wand, da bin ich mal gespannt</p>
</td>
<td align="right">Rechts</td>
</tr>
</table>
</body>
</html>
-----
Dies kommt wohl einer praktikablen Lösung nahe. Es funktioniert mit verschiedenen Schriftgrößen, kommt ohne absoluten Positionsangaben aus und arbeitet auch innerhalb verschiedener Blockelementen.
Nachteil: Bei Textbrowsern (z.B. Lynx) oder anderen Browsern, die gar kein CSS verstehen, würde der Schattentext zweimal zu lesen sein. Entweder nimmt man diesen Schönheitsfehler hin, oder man bastelt sich eine Browserweiche und gibt dann den doppelten Text nicht aus.
Getestet habe ich diese Lösung auf einem Windoof-Rechner mit MS IE 5.5, Netscape 6.2.1, Opera 6, Netscape 4.7. Leider weigert sich letzterer bei Überschriften <h1>, den Schatten unterhalb des Textes zu setzen :-( Welche CSS-Angaben fehlen da noch? Weder border:0px noch padding:0px haben geholfen. Hat jemand eine Idee?
* * *
NUN MEINE BITTE AN EUCH:
Könnt Ihr das Beispiel mal auf anderen Browsern, insbesondere anderen Rechnerplattformen wie Mac oder Linux testen und mir das Ergebnis berichten?
Hierzu könnt Ihr auch vorübergehend den Link http://mitglied.lycos.de/flugberge/test/schattentext.htm
verwenden (Werbung-Script ignorieren).
Vielen Dank im voraus!
Heiko Jägle