Transparenz - wie? - Scheintransparenz?

[swado]

Guten Morgen,

ich möchte so einen Hintergrund-Transparenz-Effekt wie etwa hier http://wazgnuks.net/ (hoffe ich darf den Link hier posten?).

Jetzt habe ich mir überlegt, ob es besser ist, mit zwei Hintergrundbildern zu arbeiten, die vom Motiv und der Größe vollständig identisch sind. Nur eines der Bilder ist die "ausgebleichte" Version als läge ein transparenter Bereich darüber.
Hiermit könnte und habe ich im Moment diesen Effekt realisiert. Die beiden Bilder sind jeweils als fixed-Hintergrundbilder zweier divs eingebunden.
Doch ich möchte beim Layouten auch den IrgendEinen Browser berücksichtigen. Da weiß ich ja, dass ich mit fixen Hintergrundbildern ein Problem habe.
Des Weiteren bekommt man mit zwei so riesen Hintergrundbildern eine ganz schöne Datenmenge.

Jetzt frage ich, ob ich den Effekt auch mithilfe einer halbtransparenten Grafik oder irgendwie diesen Filtern umsetzten könnte.
Doch funktioniert das besser, zuverlässiger?

Für welche Version würde ihr euch entscheiden?

greetz
swado

P.S.: Mal davon abgesehen, dass ich die Bilder in jedem Fall filx haben möchte also mit IE ein Problem haben werde ...

[schwarze Piste]

Tachchen!

Für welche Version würde ihr euch entscheiden?

Auf jeden Fall für die Variante der "Scheintransparenz".

Damit habe ich schon vor Jahren Seiten gebaut, die selbst im IE 5.0 und in
diversen anderen Exoten aussahen wie Halbtransparenz.

Je nach Konzeption der Seite brauchst du auch nicht über mehrere Grafiken
nachdenken; die von dir zitierte Website kommt z.B. auch mit einer aus.

Danach bleiben nur die Probleme mit fixen "Seitenbestandteilen". (<-Tipp)
Dafür gab es auch damals schon massig Lösungsansätze für steinalte Browser.
Da bin ich jetzt offen gestanden nicht mehr so up to date, weil ich fixe
Seitenbereiche nie sinnvoll fand, aber die Archive aus den End-90ern
müssten voll sein mit guten Ratschlägen. ;-)

Gruß

Die schwarze Piste

[swado]

Hallo,

danke für deine Antwort.

Naja auf das fixe könnte ich auch verzichten.

Ursprüglich ist es ehrlichgesagt mal aus der Not zu diesem fixed gekommen - ich habe es ansonsten nicht geschafft, die beiden Hintergrundbilder zweier divs genau übereinander zu bekommen.

Ok das mit einem Bild ist ein Argument.

Doch wie bekomme ich es dann genau auf die div-Kante gelegt. Am besten sollte es da genau mit der Border zusammenpassen...

greetz

[schwarze Piste]

Tachchen!

Doch wie bekomme ich es dann genau auf die div-Kante gelegt. Am besten sollte es da genau mit der Border zusammenpassen...

Margin, padding, float, position, ... CSS bietet einen bunten Strauß von
Positionierungsmöglichkeiten, die weitgehend pixelgenau arbeiten.
Ich wäre optimistisch, dass das zu deiner Zufriedenheit zu bewerkstelligen ist.

Gruß

Die schwarze Piste

[swado]

Hallo,

aber um diese zu verwenden müsste ich das Bild ja als <img> und nicht als css-backgrund einbinden?

Ich meine ein Hintergrundbild sollte doch ins CSS, ist ja kein Inhalt.

greetz
swado

[schwarze Piste]

Tachchen!

aber um diese zu verwenden müsste ich das Bild ja als <img> und nicht als css-backgrund einbinden?

Dein konkretes Projekt kenne ich zu wenig/gar nicht.
Setze dich doch zunächst einmal mit etwas Kreativität und deiner guten
Einstellung zu CSS an das Projekt und schau, was sich dabei so entwickelt.

Wenn es dann scheinbar unüberwindbare Hindernisse gibt, findest du sicher
hier wieder konkrete Hinweise und Hilfen.

Gruß

Die schwarze Piste

[swado]

Hallo,

also mein Hintergrundbild, Breite 300px, hat 100px von links eine vertikale Linie. Diese soll mit der Border des Elternelements zusammenfallen.

Mit css kann ich das Bild jedoch nur in Bezug zur linken oberen Ecke ausrichten. Dies bringt mir natürlich nichts, solange mein Elternelement eine feste pixelbreite hat und das wird es nie haben.

Wie kann ich also das background-image right-200px positionieren?

geetz
swado

[swado]

Das ist das Problem, das ich nicht lösen kann.

Deshalb hatte ich zwei Background-Images mit fixed und habe die dann halt mit 85% von der linken oberen Ecke positioniert.

Aber wenn ich das mit einer Grafik irgendwie hinbekomme.

Aber Google hilft nicht weiter, wie ich ein Hintergrundbild mit einem anderen Referenzpunkt positionieren kann.

greetz
swado

[bleicher]

Grüße,

Auf jeden Fall für die Variante der "Scheintransparenz".

was spricht gegen png mit echter Transparenz? - klar, es gibt noch welche die mit IE6 unterwegs sind - aber das wird ja wohl auch keine Behördenseite !? wenn man erwarten kann, das targetgroup einen Browser nutzt - was spricht gegen eine normale, w3c-conforme Webseite?
es ist ja schon exotisch - die jenigen die wissen, was sie tun -werden wohl ff oder Opera nutzen (oder safari oder sonst was), manch andere bakamen ie7 (8?) mit automatischen Updates ohne viel nachzudenken.

man muss heutzutage schon Aufwand betreiben um einen png-unfähigen Browser zu haben - und wer den auf sich nimmt - weiß vermutlich warum, und wird mit ein paar Designunklarheiten (die für solchen wohl gewohnte Sache sind) klarkommen, oder?

MFG
bleicher

[ChrisB]

Hi,

was spricht gegen png mit echter Transparenz?

Nicht zuletzt die Rechenlast, die man dem Browser bei der Anzeige dieser aufbrummt - um einiges komplizierter zu rendern, wenn auch noch berechnet werden muss, welche Elemente sich ggf. darunter befinden und wo sie dann durchscheinen.
Wenn die ganz simpel vermeidbar ist, in dem man nur "Scheintransparenz" nutzt - dann bin ich in den meisten Fällen dafür.

MfG ChrisB

[bleicher]

Grüße,

was spricht gegen png mit echter Transparenz?

Nicht zuletzt die Rechenlast, die man dem Browser bei der Anzeige dieser aufbrummt - um einiges komplizierter zu rendern, wenn auch noch berechnet werden muss, welche Elemente sich ggf. darunter befinden und wo sie dann durchscheinen.

dann könnte man ja auch ganz auf Grafiken verzichten - wo ziehst du denn die grenze? "soviel schnickschnack - ja, aber darüber kein bit"!?
Ein PentiumII 333Mhz mit Opera 9 hat keine Probleme eine Webseite mit recht vielen transparenten Grafiken zu rendern.

Da mach ie erfahrungsgemäß bei nicht-transparenten (zB gekachelte 2*2 px bg-Grafik) mehr ärger.

also wie sieht das Kriterium aus?
MFG
bleicher

[ChrisB]

Hi,

dann könnte man ja auch ganz auf Grafiken verzichten - wo ziehst du denn die grenze?

Dort, wo jemand versucht, eine fundierte Argumentation mit fadenscheinigen Gegenargumenten zu torpedieren - hallo bleicher :-)

"soviel schnickschnack - ja, aber darüber kein bit"!?

Es geht hier nicht um entweder-oder - sondern darum, welche von zwei Möglichkeiten, den *gleichen* Effekt zu erreichen, ich ggf. wähle.

Ein PentiumII 333Mhz mit Opera 9 hat keine Probleme eine Webseite mit recht vielen transparenten Grafiken zu rendern.

Das habe ich schon anders erlebt, auf durchaus kräftigeren Rechnern. Insb. beim Scrolling fühlte sich das schon so manches Mal alles andere als flüssig an.

MfG ChrisB

[bleicher]

Grüße,

Es geht hier nicht um entweder-oder - sondern darum, welche von zwei Möglichkeiten, den *gleichen* Effekt zu erreichen, ich ggf. wähle.

eine von zwei ist entweder-oder ;P

es geht aber darum, dass verwendung von "scheintransparenz" den vielgepredigten "fließdesign" spürbar erschwert, im gegebenem beispiel wäre zB fixierter hintergrund so nicht möglich, da man sonst beim scrollen in den "lücken" zwischen zwei einträgen merken würde, dass der hintergrund "vorgebleicht ist".

klar - nur optisches manko - aber der sinn und zweck des ganzen war optische verschönerung. also wer versucht hier mitfadenscheinigen argumenten eigene "keine fixen ayouts doktrin" zu untergraben ?

MFG
bleicher

[ChrisB]

Hi,

eine von zwei ist entweder-oder ;P

Entweder-oder war auf ganz oder gar nicht bezogen. Es ist keine Frage von "bau ich's ein oder nicht", sondern nur des wie.

es geht aber darum, dass verwendung von "scheintransparenz" den vielgepredigten "fließdesign" spürbar erschwert,

Das kommt immer auf den Anwendungsfall an.

also wer versucht hier mitfadenscheinigen argumenten eigene "keine fixen ayouts doktrin" zu untergraben ?

Niemand.

MfG ChrisB

[Dennis]

Hi bleicher,

dann könnte man ja auch ganz auf Grafiken verzichten - wo ziehst du denn die grenze? "soviel schnickschnack - ja, aber darüber kein bit"!?
Ein PentiumII 333Mhz mit Opera 9 hat keine Probleme eine Webseite mit recht vielen transparenten Grafiken zu rendern.

Du musst zwischen transparent und teiltransparent unterscheiden. Transparenz im Sinne von 100%ig transparent gabs ja früher schon mit GIFs und das ist auch nicht wirklich rechenlastig. Hingegen ist Teiltransparenz, wie sie z.B. mit PNGs möglich ist, durchaus rechenlastig.

Ein Beispiel im negativen Sinne: http://trillian.im/learn/. Die Seite lädt einwandfrei und wird auch einwandfrei dargestellt, aber beim Scrollen hakt es ein klein wenig. Es scrollt nicht ganz so flüssig wie andere Webseiten es tun. Und an der Rechenleistung meines Computers liegt es garantiert nicht.

Viele Grüße,
  ~ Dennis.

[swado]

Hi,

danke für dein Anregung.

Naja also w3c-konform kann die andere Lösung ja vielleicht auch sein.
Wobei wenn ich das Bild mit css nicht so positioniert bekomme, wie ich möchte, muss ich ein Design-Bild ins HTML aufnehmen. Wäre aber immer noch konform, wenn auch unschön. Vielleicht gibts ja eine Lösung zum positionieren?

Naja ich weiß nicht wie gut unterstützt halbtransparente PNGs jetzt wirklich sind, aber ich weiß, dass einige der Seitenbesucher mit IE6 u. 7 unterwegs sind. Wie ist da die Unterstützung von halbtransparenz?

Es gibt doch auch irgendwelche css-opacity-Filter, die sind aber wahrscheinlich noch weniger unterstützt.

greetz
swado

P.S.: Ist es für den Browser aufwändiger bei halbtransparentem Hintergrund das Durchchscheinen zu rendern? Verzögerungen beim Scrollen oder so zu erwarten?

[bleicher]

Grüße,

Naja ich weiß nicht wie gut unterstützt halbtransparente PNGs jetzt wirklich sind, aber ich weiß, dass einige der Seitenbesucher mit IE6 u. 7 unterwegs sind. Wie ist da die Unterstützung von halbtransparenz?

die sehen nichttransparentes, weißes Hintergrund statt Milchglaseffekt - ist das denn so schlimm?
MFG
bleicher

[swado]

P.P.S.:
Solange ich mit CSS das background-image nicht richtig positioniert bekomme, scheine ich mein Vorhaben mit halbtransparenten PNGs aber besser umsetzen zu können.

[Der Martin]

Hallo,

man muss heutzutage schon Aufwand betreiben um einen png-unfähigen Browser zu haben

nein, es reicht, wenn man in einem Betrieb oder einer Behörde arbeitet, in dem die PCs noch Windows 2000 als Betriebssystem haben. Und davon gibt es viele.

und wer den auf sich nimmt - weiß vermutlich warum, und wird mit ein paar Designunklarheiten (die für solchen wohl gewohnte Sache sind) klarkommen, oder?

Wenn einer sich freiwillig für sowas Altes entschieden hat, stimme ich dir zu.

So long,
 Martin

[bleicher]

Grüße,

nein, es reicht, wenn man in einem Betrieb oder einer Behörde arbeitet, in dem die PCs noch Windows 2000 als Betriebssystem haben. Und davon gibt es viele.

da wird das aufrufen der Seiten der besprochenen Art wohl auch kaum erlaubt sein - privates surfen vom Arbeitsplatz aus ist, selten erlaubt - ist also kein Argument :P

außer du bist für den verbot von fahrradschlößern, da diese die fahrradiebe stören könnten ;)
MFG
bleicher

[schwarze Piste]

Tachchen!

was spricht gegen png mit echter Transparenz?

Dass ich aktuell noch keinen konkreten Vorteil sehen kann, solange es das
"normale" Bild auch tut. Da ist sicherlich zunächst die Kompatibilität
mit älteren IEs was die Transparenz angeht, aber es kann auch schnell mal
die sinnvolle nutzbare Farbtiefe von PNG sein (wieder ältere IEs).

Auf semitransparente PNGs würde ich erst umsteigen, wenn OPs "Strukturprobleme"
unlösbar erscheinen ohne diese Variante.

Gruß

Die schwarze Piste