Probleme beim Alpha-Übergang mit transparenten Bildern

**TLight** · 19.11.2011, 17:54

Auf der Testseite http://www.tvms.de/cms2011 habe ich in das Banner den Imageslider eingebunden. Da ich die runden Ecken, Schatten und Transparenzen möglichst auch in vielen alten Brwosern dargestellt haben möchte, sind die Bilder als png-Dateien eingebunden. Nun habe ich das Problem, dass beim Alpha-Übergang durch den Imageslider auch die Schatten um den Header herum überlagern, also immer dunkler werden und dann, wenn der Slide abgeschlossen ist, schlagartig wieder heller werden.

Folgende Varianten habe ich überdacht, bergen aber m. E. nach andere Probleme.
- Schatten außen herum als png fest, nur inneres Bild als jpg in den Slider --> Problem der runden Ecken in älteren Browsern erzeugt hässliche Ecken
- Ganzes Bild samt Schatten als jpg in den Slider und mit z-index nach hinten, sodass die Schatten der Navigation und des Main-Bereichs transparent überlagern können --> Problem mit dem Grautonverlauf im Hintergrund (v. a. bei sehr breiten Bildschirmen).

Hat jemand evtl. noch bessere Ideen? Wäre Euch sehr dankbar!

**tblumrich** · 19.11.2011, 23:25

Hi.

Was hältst du davon die Schatten via CSS3 zu erzeugen?
Contao 2.10.xx bringt da ja recht komfortable und aufgrund einer CSS3 Framework Umsetzung (CSS3Pie) auch einigermaßen zugängliche Möglichkeiten mit.

Gruß
Thomas

**TLight** · 20.11.2011, 14:02

Vielen Dank für Deine schnelle Antwort!

Diese Idee hatte ich auch. Meine Überlegungen waren, dass ich, wenn ich diese Variante gehe, auch dann auch die runden Ecken und die Transparenzen so erzeugen muss. Natürlich wäre das sowohl sehr schön und kompakt als auch viel schneller zu laden.

Doch leider bringt der IE8 hierbei keine Unterstützung mit und alle, die noch Windows XP nutzen, also meines Wissens nach nicht auf den IE9 umsteigen können, würden eine doch sehr abgespeckte und unansehnliche Website präsentiert bekommen (keine runden Ecken, kein Schatten, keine Transparenz). Oder irre ich mich da und habe evtl. etwas übersehen?

**tblumrich** · 20.11.2011, 23:27

Zitat von TLight

Vielen Dank für Deine schnelle Antwort!

Diese Idee hatte ich auch. Meine Überlegungen waren, dass ich, wenn ich diese Variante gehe, auch dann auch die runden Ecken und die Transparenzen so erzeugen muss. Natürlich wäre das sowohl sehr schön und kompakt als auch viel schneller zu laden.

Doch leider bringt der IE8 hierbei keine Unterstützung mit und alle, die noch Windows XP nutzen, also meines Wissens nach nicht auf den IE9 umsteigen können, würden eine doch sehr abgespeckte und unansehnliche Website präsentiert bekommen (keine runden Ecken, kein Schatten, keine Transparenz). Oder irre ich mich da und habe evtl. etwas übersehen?

Der zweite Teil meines Beitrages meint genau das. Contao sorgt mit CSS3Pie für die Umsetzung in IE8 und 7.
Es gibt ein paar kleine Fallstricke, aber darüber kannst du hier im Forum was finden... probiers doch einfach aus.

Gruß
Thomas

**TLight** · 21.11.2011, 06:34

Ah, okay. Das hatte ich nicht verstanden. Werde es ausprobieren und berichten. Vielen Dank!!

**TLight** · 11.12.2011, 14:43

So, nun habe ich alles mittels css3 gestaltet. Die Darstellung via css3pie im ie7/8 ist aber mehr als zäh (langsam und unvollständig). Gibt es eine Möglichkeit css3pie abzuschalten? Im Forum habe ich hierzu nur gefunden, dass ein anderer css-editor verwendet werden soll.

**tblumrich** · 11.12.2011, 15:36

Hi.

Unter 2.10.* wüsste ich nicht, wie das abzuschalten wäre.
Aber was heißt "zäh und unvollständig" konkret? Ich konnte bei meinen Projekten bis dato nicht wirklich Performanceeinbu0en feststellen können, falls das gemeint ist.
Was die Umsetzung angeht gibt es tatsächlich ein paar Darstellungsprobleme und muss hier und da ein paar Dinge beachten (position:relative für die betreffenden Elemente, möglichst Kurzschreibweise der CSS3 Definitionen usw...). Aber um da konkret zu helfen, bräuchte man auch konkrete Aussagen oder noch besser, was zum Sehen.

Abgesehen von allem... exzessiv würde ich davon auch nicht Gebrauch machen... und mit der Gewissheit, das die Leute mit alten Browsern hier und da eben keine Runden Ecken und Schatten sehen, leben.

Gruß
Thomas

**TLight** · 11.12.2011, 16:45

Hallo Thomas!

Vielleicht hast Du ja Lust, kurz auf den am Anfang des Threads genannten Link zu klicken. Dort sollte die Site online sein. Bei mir dauert der Seitenaufbau im IE8 ewig, der Rahmen um den Container fehlt und die Aufklapp-Menüs hinterlassen zuerst weiße Flächen und rollen später nur sehr langsam.

Viele Grüße,
Torsten

**tblumrich** · 11.12.2011, 18:12

Hi.

Wie schon angedeutet... ich würde niemals die komplette Breitseite (Schatten, Verläufe, Transparenzen und Runde Ecken) nutzen, wenn ich den Anspruch habe, damit alle Browser zu befriedigen. Und schon gar nicht mit anderen aufwendigen Dingen wie Aufklappmenüs a'la Menumatic.
Besonders die RGBA Umsetzung mach Probleme...

Performanceprobleme beim Laden kann ich übrigens nicht entdecken.

Es gibt im Forum auch 1-2 Threads über Probleme mit den CSS3 Eigenschaften, die für ältere MS Browser mit der PIE.htc gefügig gemacht werden sollen... z.B.:
http://www.contao-community.de/showt...icht-angewandt

Gruß
Thomas