CSS3-Eigenschaft opacity und Opera

[Junny]

Moin,

ich habe mich etwas mit JavaScript beschäftigt und spiele zum "Anwenden" meiner Kenntnisse mit einem effektvollen Menü herum: Je näher die Maus an einem Menüpunkt ist, desto größer, untransparenter und weiter unten wird er dargestellt.
Für die Transparenz nutze ich die CSS3-Eigenschaft opacity, die von Firefox 3 schon sehr gut unterstützt wird. Für den IE ab 5.5 kann ich auf
filter: alpha ausweichen, das klappt ganz gut (auch wenn der IE aufgrund meines uneffektiven Scripts Performanceprobleme hat).
Mein Sorgenkind ist im Moment Opera, der ein merkwürdiges Verhalten an den Tag legt: Für Schwarze Schrift auf weißem Grund zeigt er die Transparenz einwandfrei an. Sobald ich aber Weiße Schrift auf schwarzem Grund einstelle, blendet er einen Großteil des Textes ganz aus. Bilder funktionieren in beiden Fällen einwandfrei.

WaveMenu

Weiß jemand einen Rat, wie ich das im Opera 9.5 bei weißer Schrift auf schwarzem Grund schick kriege?

Gruß
Junny

 

[DerMitSkill]

Ich kann Dir nicht helfen, aber das Menü ist ja mal geil Mac-Style xD Und es gibt übrigens schon Opera 9.6 ;)

 

[neuroleptika]

...Sobald ich aber Weiße Schrift auf schwarzem Grund einstelle, blendet er einen Großteil des Textes ganz aus. Bilder funktionieren in beiden Fällen einwandfrei.
...

Ich kann kein Unterschied zwischen Opera 9.5 un ff2 feststellen.

 

[Junny]

Hier ein Screenshot des von mir erwähnten Anzeigefehlers.

 

[neuroleptika]

Keine Ahnung woran das liegt.
Bei mir sieht es genauso gut aus wie im ff (Opera9.5 Linux).

Ich kann es mir morgen auch gerne unter Windows (Vista oder xp?) ansehen.
Mac hab ich leider nicht.

 

[Junny]

Hm, merkwürdiges Verhalten. Auch unter Opera 9.6 nicht anders. Das größte Problem daran ist, dass nicht nur Schriften, die transparent sein sollen, nicht angezeigt werden, sondern auch ganz normale Schriften des Inhalts. So kann man die betreffenden Worte des Menüs auch nicht durch Bilder ersetzen...
Für diese "Anwendung" spiele ich schon mit dem Gedanken, die Finger von CSS3 zu lassen und stattdessen 8 png-Bilder pro Menüpunkt zu erstellen - jeweils mit abgestuften Transparenzen.

 

[neuroleptika]

Ich muß mich mal korrigieren.
Ich habe mir dein Beispiel nicht im Opera 9.5 (Linux) sondern im Opera 9.2.4 (Linux) angesehen.
Damit war die Darstellung OK.

Im Opera 9.2.5 (win) funktioniert es auch.
Aber im Opera 9.6 (win) sieht es so aus, wie auf deinem Screenshot.
Weitere Opera-Versionen habe ich nicht installiert.

Ich habe leider keine Idee was du dagegen tun könntest.

Ich würde wohl auch Grafiken verwenden.
Allerdings kann mann mit png-8 , meins Wissens, keine halbtransparenten Grafiken darstellen. Die Transparenz von png-8 ist mit der von gif vergleichbar.


Vielleicht verwendest du besser png-32 und für den IE6 Filter anstelle der Grafiken.
Für IE gibt es auch richtig gut aussehende Filter. Es darf für den IE 6 vielleicht auch anders (nicht schlechter) aussehen?!

 

[Junny]

Zu dem opera-Problem: Ich machs viel einfacher! Ich gebe den unterschiedlichen Transparenzklassen unterschiedliche Schriftfarben, dann sieht es genauso aus wie Transparenz :-D.
edit: es geht! WaveMenu

Zur IE6-Transparenz-Problematik:

Allerdings kann mann mit png-8 , meins Wissens, keine halbtransparenten Grafiken darstellen. Die Transparenz von png-8 ist mit der von gif vergleichbar.

Was ich nutze, heißt in meinem Grafikprogramm png-24. Keine Ahnung, ob das dem von Dir erwähnten png-32 entspricht. Auf Deinen Hinweis hin habe ich eben einen interessanten Artikel über png-8 (englisch) gefunden, das ich bisher nicht kannte. Mit einem Trick soll da auch halbe Transparenz möglich sein, die an allen aktuellen Browsern funktioniert. Soweit ich das aber deuten kann, geht dann der filter-Workaround für den IE6 nicht mehr.

Vielleicht verwendest du besser [...] für den IE6 Filter anstelle der Grafiken.
Für IE gibt es auch richtig gut aussehende Filter. Es darf für den IE 6 vielleicht auch anders (nicht schlechter) aussehen?!

Ja, das hatte ich eigentlich vor. Allerdings stellt sich mir im Moment das Problem, dass der Filter die Bilder als Hintergrundbild einfügt. Dann kann man sie leider nicht mehr per javascript skalieren. Für irgendwelche Ideen in der Richtung bin ich auch dankbar :-).

Zur IE-Problematik: Die Performance lässt ja noch zu wünschen übrig im IE. Irgendeine Idee, wie ich den Script effizienter machen kann? Oder soll ichs mal im Javascript-Teil dieses Forums fragen?

Gruß
Junny

 

[macinti777]

Beim Safari von MAC Leopard wirds so angezeigt:

http://img241.imageshack.us/img241/853/bild11dp1.png

Und ein Fehler hast Du grafisch noch:

http://img291.imageshack.us/img291/5817/bild12rr0.png

Das mit dem PNG, ja das stimmt, um dem Letzten Menüpunkt den Fehler zu korrigeiern , speichere es mit Fireworks auf 32-Bit mit transparentem Boden, dann ist der Fehler auch behoben, zumidest sehen Macuser dann kein Fehler mehr:)

 

[Junny]

Ja, die Schrift sollte jetzt in allen gängigen Browsern sanft eingeblendet werden ohne Fehler in der Darstellung zu erzeugen.
Übrigens gefällt mir die Schriftenglättung auf dem Screenshot.

Der Grafikfehler ist ja merkwürdig. IE6 ist wenigstens konsequent und stellt alle Bilder falsch dar, während es bei Safari nur das letzte ist. Werd mir mal ne Testversion von Fireworks besorgen, danke für den Tipp!

Gruß
Junny