nicht angemeldet
Shadow on the wall - Browser testen
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
-
Hallo Heiko,
<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>Optisch ist das ganze natürlich recht nett, aber in der Praxis würde ich es so nie verwenden. Es ist redundant, sprich die Information steht zweimal da. Man stelle sich jetzt den Blinden vor, der die Seite mittels Braillé-Zeile liest und sich wundert, ob der Seitenersteller an einer Art Satz-Stottern leidet. ;-)
Und in der Praxis passiert natürlich folgendes:
Doch leider funktioniert dies nicht in jeder Kombination mit anderen HTML-Blockelementen. :-(
Du sagst es. :-)
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>Wobei ich die Microsoft-Lösung Deiner zumindest in dem Punkt für überlegen halte, daß die Redundanz wegfällt. Das Konzept ist besser. Aber wie leider immer in der praktischen Ausführung rennt Microsoft am Standard vorbei und bastelt einen Stand-Art.
Denn schließlich ist sowas in CSS2 schon vergesehen, nur habe ich es noch nirgendwo implementiert gesehen. Also weiter warten.
http://selfhtml.teamone.de/css/eigenschaften/schrift.htm#text_shadow
[... Beispielcode ...]
Dies kommt wohl einer praktikablen Lösung nahe. [...]
Nein.
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, ...
Das ist für mich leider kein Schönheitsfehler.
Also weiter warten auf CSS2.- Tim
PS: Dein Beispiel funkioniert auch bei mir im Mozilla 1.1.
--
Ceci n'est pas une ... ehm .. Signature.-
Hallo Heiko,
Hallo Tim,
Optisch ist das ganze natürlich recht nett, aber in der Praxis würde ich es so nie verwenden. Es ist redundant, sprich die Information steht zweimal da. Man stelle sich jetzt den Blinden vor, der die Seite mittels Braillé-Zeile liest und sich wundert, ob der Seitenersteller an einer Art Satz-Stottern leidet. ;-)
Für diesen Fall würde sich ein Stylesheet anbieten, daß für Braille-Lesegeräte den doppelten Text "unsichtbar" machen würde, ähnlich dem "visibility:hidden" bei den normalen Browsern. Allerdings weiß ich jetzt nicht, welches CSS Schlüsselwort dafür zuständig wäre.
Denn schließlich ist sowas in CSS2 schon vergesehen, nur habe ich es noch nirgendwo implementiert gesehen. Also weiter warten.
... bitte warten ... bitte warten ... ich schätze, Mozilla wirds eher einbauen als MS IE, falls überhaupt.
Dies kommt wohl einer praktikablen Lösung nahe. [...]
Nein.War ja nur ein Versuch ;-)
Trotzdem danke für deine Beurteilung.
Heiko
-
Hallo Heiko,
Für diesen Fall würde sich ein Stylesheet anbieten, daß für Braille-Lesegeräte den doppelten Text "unsichtbar" machen würde, ähnlich dem "visibility:hidden" bei den normalen Browsern. Allerdings weiß ich jetzt nicht, welches CSS Schlüsselwort dafür zuständig wäre.
display:none wäre das dann.
Allerdings weiß ich nicht, ob die gängigen Textbrowser (Die gibt es ja auch noch), die mit der Braillezeile benutzt werden, Stylesheets überhaupt benutzen oder auf die Stylesheetangabe media="braille" überhaupt reagieren.
- Tim
--
Manche vermuten George Lucas unter gl@jedi.org, andere unter gl@empire.gov. Ich denke, man findet ihn unter trade-federation.com.
-
-
Hi,
ich weiß zwar nicht so recht wie es aussehen soll,
aber hier ist dein Beispiel unter Linux und Mozilla1.1
Grüesslie,
James.
-
Hi,
ich weiß zwar nicht so recht wie es aussehen soll,
aber hier ist dein Beispiel unter Linux und Mozilla1.1
Grüesslie,
James.
Danke James,
damit weiß ich jetzt, daß Mozilla unter Linux genauso wie unter Windoof aussieht. Beim alten Netscape gab es immer mal Unterschiede.
Heiko
-
-
Hallo allerseits,
der Konquerer 3.0.0 unter Suse zeigt es korrekt an!
Vielen Dank im voraus!
ciao
romyHeiko Jägle
--
DIE ROMY AUS L. AN DER P. SAGT DANKE UND AUF WIEDERSEHEN