Vergrößerbare Box mit transparenten PNGs

[Lukas]

Hallo ihr,

gibt es eine Möglichkeit eine vertikal und horizontal vergrößerbare Box zu erstellen, die einen Rahmen aus transparenten PNGs hat? Mit nicht-transparenten Bildern kann man ja mehrere DIVs ineinander schachteln bei denen dann die Bilder für die Rahmen jeweils Hintergrundbilder in den verschachtelten DIVs sind. Aber wenn man das mit transparenten Bildern macht, scheint dabei das hintere Bild in dem transparenten Bereich des Bildes darüber durch.

Gibt es da denn noch eine andere Möglichkeit eine in alle Richtungen vergrößerbare Box zu erstellen die einen Rahmen aus transparenten PNGs hat?

Grüße
Lukas

[dave]

Hi,

ich verstehe deine Beschreibung denke ich nicht ganz.

Abhängig davon welche Browser du unterstützen willst gäbe es die Möglichkeit von border-images.

~dave

[Detlef G.]

Hallo Lukas

… Aber wenn man das mit transparenten Bildern macht, scheint dabei das hintere Bild in dem transparenten Bereich des Bildes darüber durch.

Das kommt darauf an, wie man es macht.
Schau dir mal Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund an.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

@@Detlef G.:

nuqneH

Das kommt darauf an, wie man es macht.
Schau dir mal Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund an.

Als schlechtes Beispiel?

Weder für runde Ecken noch für transparente Hintegründe sind Grafiken notwendig, einige wenige Zeilen CSS genügen.

(IE-Nutzer werden die eckigen Ecken verscmerzen können.)

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Weder für runde Ecken noch für transparente Hintegründe sind Grafiken notwendig, einige wenige Zeilen CSS genügen.

(S|Z)ieh dir mal Jeans an.

(IE-Nutzer werden die eckigen Ecken verscmerzen können.)

Wer at ier Bucstaben gestolen?

Qapla'

[Detlef G.]

Hallo Gunnar

Weder für runde Ecken noch für transparente Hintegründe sind Grafiken notwendig, einige wenige Zeilen CSS genügen.

„Ich mach' mir die Welt
Widdewidde wie sie mir gefällt”

(Vielleicht können wir ja in ein paar Jahren noch einmal darüber reden.)

(S|Z)ieh dir mal Jeans an.

Als schlechtes Beispiel?

(IE-Nutzer werden die eckigen Ecken verscmerzen können.)

Wenn es nur fehlende runde Ecken wären.
Im größten Teil der nicht ganz taufrischen Browser ist entweder überhaupt nichts vom Seiteninhalt zu sehen oder es ist nicht lesbar!

Was soll das also sein?
Eine Studie, wie so schön einfach es wäre, wenn alle Seitenbesucher aktuelle NichtIEs verwenden würden?

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

@@Detlef G.:

nuqneH

(Vielleicht können wir ja in ein paar Jahren noch einmal darüber reden.)

Das können wir heute schon.

Wenn es nur fehlende runde Ecken wären.
Im größten Teil der nicht ganz taufrischen Browser ist entweder überhaupt nichts vom Seiteninhalt zu sehen oder es ist nicht lesbar!

?? Welche sollen das sein? Nicht-IEs verfügen über automatische Update-Funktion. (Wer die ausschaltet, ist selber schuld.)

Und ja, die Anpassung für IEs (Transparenz mit 'filter') hab ich (noch) nicht eingebaut. Hol ich vielleicht mal nach.

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

?? Welche sollen das sein? Nicht-IEs verfügen über automatische Update-Funktion. (Wer die ausschaltet, ist selber schuld.)

Nö. Wer sich automatisch jede (potentiell verbugte, mit Sicherheitslücken versehene, teilweise plötzlich mit ungewünschten Zusatzprogrammen wie z.B. Toolbars versehene) Version, die als Update herausgegeben wird, ist selber schuld. Bei allen Programmen, die automatische Updates bieten, schalte ich das entweder ab oder lasse mir lediglich das Vorhandensein einer neuen Version anzeigen. ICH bestimme, was auf mmeinem Computer installiert wird.

Cü,

Kai

[Gunnar Bittersmann]

@@Kai345:

nuqneH

?? Welche sollen das sein? Nicht-IEs verfügen über automatische Update-Funktion. (Wer die ausschaltet, ist selber schuld.)

Nö. Wer sich automatisch jede (potentiell verbugte, mit Sicherheitslücken versehene, teilweise plötzlich mit ungewünschten Zusatzprogrammen wie z.B. Toolbars versehene) Version, die als Update herausgegeben wird, ist selber schuld.

Nein, das halte ich für ziemlichen Unsinn.

In Browsern werden immer wieder Sicherheitslöcher gefunden und gefixt. Seinen Browser sollte man zu seiner Sicherheit immer aktuell halten.

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

Nö. Wer sich automatisch jede (potentiell verbugte, mit Sicherheitslücken versehene, teilweise plötzlich mit ungewünschten Zusatzprogrammen wie z.B. Toolbars versehene) Version, die als Update herausgegeben wird, ist selber schuld.

Nein, das halte ich für ziemlichen Unsinn.

Du vielleicht. Ich nicht.

In Browsern werden immer wieder Sicherheitslöcher gefunden und gefixt. Seinen Browser sollte man zu seiner Sicherheit immer aktuell halten.

Na und? Wenn ein Update herauskommt, schaue ich ohnehin in den "Change(log)s" nach, um was es sich handelt. Ist es eine extrem gefährliche Sicherheitslücke, wird ein Update gestartet. Ansonsten halt nicht bzw. nach 1-2 Wochen. Aber ein Automatismus kommt mir nicht ins Haus.

Cü,

Kai

[Detlef G.]

Hallo Gunnar

Wenn es nur fehlende runde Ecken wären.
Im größten Teil der nicht ganz taufrischen Browser ist entweder überhaupt nichts vom Seiteninhalt zu sehen oder es ist nicht lesbar!

?? Welche sollen das sein? Nicht-IEs verfügen über automatische Update-Funktion. (Wer die ausschaltet, ist selber schuld.)

Und ja, die Anpassung für IEs (Transparenz mit 'filter') hab ich (noch) nicht eingebaut. Hol ich vielleicht mal nach.

Ja toll!
_Nach_ meiner Antwort besserst du nach, so dass in älteren Browsern wirklich nur noch runde Ecken und Schrägstellung fehlen, während bei der ursprünglich verlinkten Version überhaupt nichts vom Inhalt angezeigt wurde oder lesbar war.

Auf Wiederlesen
Detlef

[Matthias Apsel]

Om nah hoo pez nyeetz, Detlef G.!

Und ja, die Anpassung für IEs (Transparenz mit 'filter') hab ich (noch) nicht eingebaut. Hol ich vielleicht mal nach.

Ja toll! Nach meiner Antwort besserst du nach, so dass in älteren Browsern wirklich nur noch runde Ecken und Schrägstellung fehlen, während bei der ursprünglich verlinkten Version überhaupt nichts vom Inhalt angezeigt wurde oder lesbar war.

also im IE-Tester ist bis hinunter zu 5.5 der komplette Text lesbar.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

also im IE-Tester ist bis hinunter zu 5.5 der komplette Text lesbar.

Hm, ein Lorem-ipsum-Text sollte doch gerade _nicht_ lesbar sein‽ ;-)

Qapla'

[Gunnar Bittersmann]

@@Detlef G.:

nuqneH

Und ja, die Anpassung für IEs (Transparenz mit 'filter') hab ich (noch) nicht eingebaut.

Oops, das hatte ich doch schon.

Ja toll!
_Nach_ meiner Antwort besserst du nach

Da kannste mal sehen, wie sehr ich mir dein Anliegen zu Herzen nehme. ;-)

so dass in älteren Browsern […]

Das urprüngliche Ansinnen des Beispiels war es auch, die Möglichkeiten von CSS 3 in modernen Browsern aufzuzeigen; nicht, das auch per graceful degradation für ältere Browser lesbar zu machen.

[…] wirklich nur noch runde Ecken und Schrägstellung fehlen

Schrägstellung geht im IE auch; hol ich bei Gelegenheit nach.

während bei der ursprünglich verlinkten Version überhaupt nichts vom Inhalt angezeigt wurde […]

Ich hatte jeans.html und jeans.jpg im selben Verzeichnis samples. Einige Browser kamen beim Aufruf von …/samples/jeans mit content negotiation nicht klar; …/samples/jeans.html hätte wohl funktioniert.

[…] oder lesbar war.

Nicht-IEs, die rgba() nicht kennen, hatten keine Angabe zum Hintergrund für 'body'; also schwarz auf Blue Jeans. Hab jetzt einen gesetzt, der in Browsern, die rgba() verstehen, durch dieses überschrieben wird.

Qapla'

[Detlef G.]

Hallo Gunnar

Das urprüngliche Ansinnen des Beispiels war es auch, die Möglichkeiten von CSS 3 in modernen Browsern aufzuzeigen; nicht, das auch per graceful degradation für ältere Browser lesbar zu machen.

Nur leider halte ich das für nötig, solange die älteren Browser statt endlich aus meinen Logs zu verschwinden, immer noch etliche Prozent ausmachen.
(Mein Extremfall - OK, der IE6-Anteil ist jetzt „nur” noch bei etwa 50%.)

Dabei frage ich mich dann, ob es wirklich sinnvoll ist, die modernen Browser mit CSS3 zu bedienen, wenn ich für die anderen dann doch wieder extra etwas bastele.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

@@Detlef G.:

nuqneH

das auch per graceful degradation für ältere Browser lesbar zu machen.

Nur leider halte ich das für nötig, solange die älteren Browser […] immer noch etliche Prozent ausmachen.

Für Seiten, die auch mit älteren Browsern besucht werden sollen, mag da zutreffen. Wie gesagt, das war für meine Beispielseite nicht gegeben.

Dabei frage ich mich dann, ob es wirklich sinnvoll ist, die modernen Browser mit CSS3 zu bedienen

Ja!!!11 Transparenz ohne Bilder, Schatten ohne Bilder, Farbverläufe ohne Bilder – das spart Requests, Traffic, Ladezeit.

wenn ich für die anderen dann doch wieder extra etwas bastele.

Frag dich doch lieber, ob es wirklich sinnvoll ist, dies noch zu tun.

Eine Webseite muss nicht unbedingt in allen Browsern gleich gut aussehen. Lesbar sollte sie im IE 6 sein; das ist sie auch ohne Transparenz, Schatten, Farbverläufe.

Qapla'

[Gunnar Bittersmann]

@@Detlef G.:

nuqneH

„Ich mach' mir die Welt
Widdewidde wie sie mir gefällt”

BTW, die gute Pippi hat nun auch schon das Rentenalter erreicht. War auch bei Google zu sehen.

Qapla'

[Lukas]

Hallo Delef,

danke genau sowas habe ich gesucht.

Pipi Langstrumpf, äh, Lukas.

Hallo Lukas

… Aber wenn man das mit transparenten Bildern macht, scheint dabei das hintere Bild in dem transparenten Bereich des Bildes darüber durch.

Das kommt darauf an, wie man es macht.
Schau dir mal Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund an.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

@@Lukas:

nuqneH

danke genau sowas habe ich gesucht.

Ich glaub es nicht.

Qapla'

[Gunnar Bittersmann]

@@Lukas:

nuqneH

gibt es eine Möglichkeit eine vertikal und horizontal vergrößerbare Box zu erstellen, die einen Rahmen aus transparenten PNGs hat?

Warum? Welchen Effekt willst du erreichen?

Slidings doors werden mit transparenten Grafiken problematisch.

Qapla'