PNG-Shadows+Transparenz - Wie cross-browser optimieren?

  1. catvarlog

    catvarlog Thread Starter MacUser Mitglied

    Mitglied seit:
    30.01.2005
    Beiträge:
    1.468
    Zustimmungen:
    1
    die sitaution:

    es geht um div-basisertes css-layout

    • 2-coloumns (YAML 2-col fixed), centered (mittig)
    • background-image => fixed (scrollt also nicht mit)
    • das "background-image" ist mehrfarbig strukturiert
    • der gesamtcontainer soll von einem fluffigen schatten eingerahmt werden. dieser muss transparent sein, da das background-image strukturiert ist und nicht mitscrollt (fixed).
    • die länge des gesamtcontainers ist nicht bekannt, da beliebig viel inhalt auf "einer seite" dargestellt werden kann.

    wie zur hölle kann man das crossbrowser kompatibel realisieren. hat jemand vielleicht einen guten link parat?
     
    catvarlog, 12.12.2005
    #1
  2. dms

    dms

    Kommt drauf an was Du mit "Crossbrowser" genau meinst. Für ein wenig ältere Browser wird es da wahrscheinlich keine Möglichkeit geben.

    Das grösste (bzw. einzige) Problem bei den aktuellen Browsern ist der IE6. Dieser htc-Hack wird wahrscheinlich nicht mit Hintergrundgrafiken funktionieren, aber wie auch immer, so wäre es eh schöner:

    Für alle anständigen Browser definierst Du im Contentbereich ein teiltransparentes PNG als HG. (Also der fluffige Schatten)

    background-image:url(teiltransparent.png);

    Speziell für den IE biegst Du dass dan in einem Conditional-Comment wieder hin. Dazu definierst Du eine nichttrasparente Grafik als HG, und legst einen Alpha-Filter drüber:

    background-image:url(nichttransparent.png);
    filter:alpha(opacity=xx);

    Alternativ könntest Du auch anders herum vorgehen und für alle Browser eine nichttransparente Grafik definieren und dann mit den verschiedenen Angaben transparent machen:

    filter:alpha(opacity=xx); <-IE Win ab 5.5
    -moz-opacity:xx; <-Mozilla
    opacity:xx; <-W3C-Standard

    Dann müsstest Du jedoch zumindest für Opera eine transparente Grafik definieren, denn der kann leider noch immer keine Trasparenz.

    Ich weis nun allerdings nicht wie es sich dann im Detail mit der Trasparenz der Inahlten verhält. Theoretisch müsste der Inahlt des Content-Containers ebenfalls transparent sein. Vlt. kann man das wieder richten indem man den Inahlt in einen weiteren Container stopft und hier die Transparenz wieder abschaltet.

    Falls das ein Teil Deiner Frage war, dann schau Dir mal das an: http://www.redmelon.net/tstme/4corners/ Ich hab das Beispiel vor einiger Zeit mit über 30 Browsern getestet, alles tutti.

    Edit: Ach ja, was noch zu erwähnen wäre: Soche teiltransparenten Bereiche zehren ziemlich an der Performance. Da stockt mein drei Jahre alter P4 bei manchen Seiten sogar.
     
    dms, 12.12.2005
    #2
  3. catvarlog

    catvarlog Thread Starter MacUser Mitglied

    Mitglied seit:
    30.01.2005
    Beiträge:
    1.468
    Zustimmungen:
    1
    hallo dms, danke für deine ausführliche antwort, die mit weiter hilft!

    mit "Crossbrowser" meine ich "die gängisten" - IE 5.5 => 6, Firefox, Safari, Opera...

    wir probieren es gerade mit "filter".
    habe dazu auch folgenden nette link gefunden:
    http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217

    bzgl. länge der inhalte: das hatte ich erwähnt, da die mir bekannten png-hacks eine width/height-defintion der pngs brauchen und daher nicht im rahmen von repeater-backgrounds per css funktionieren...
     
    catvarlog, 12.12.2005
    #3
  4. dms

    dms

    Bin gerade selbst auf das Problem gestossen. Filter, in diesem Fall Alpha, lassen sich nicht überschreiben. Speziell für diesen Fall habe ich aber eine Lösung gefunden. Den Text in ein weiteres Element packen und dessen position auf relative setzen. Dann wird der Text interessanterweise nicht mehr transparent dargestellt.

    Also so inetwa:
    Code:
    <div style="background-image:url(...);filter:Alha(...);">
       <div style="position:relative;">Text</div>
    </div>
    Versteht zwar kein Schwein, aber hey, funktioniert. ;)
     
    dms, 27.12.2005
    #4
Die Seite wird geladen...
Ähnliche Themen - PNG Shadows+Transparenz cross
  1. sandiipa
    Antworten:
    3
    Aufrufe:
    511
    TEXnician
    10.02.2016
  2. nilolaus
    Antworten:
    1
    Aufrufe:
    505
    nilolaus
    21.03.2009
  3. muellermanfred
    Antworten:
    7
    Aufrufe:
    1.140
    miss.moxy
    20.07.2008
  4. strubel
    Antworten:
    1
    Aufrufe:
    848
    admartinator
    22.02.2008
  5. vau-s
    Antworten:
    1
    Aufrufe:
    657
    liquid
    01.03.2006