Raffi: Runde Ecken

Hallo Leute

ich will folgendes realisieren:

Eine Website, die in einer Tabelle runde Ecken hat. Das sieht man noch oft im Web. Dies wird mit GIF Bilder die den Ecken darstellen gelöst. Nun ich will das die komplette Website durch CSS angepasst werden kann (farblich). Wenn ich nun alles ändere, wird natürlich der runde Ecken (GIF) nicht geändert.

Ich habe mir schon div. Gedanken gemacht: z.B. in die Eck-Zelle eine Hintergrundfarbe zu setzen und dann ein GIF in die Zelle einfügen, indem der Bogen transparent ist, dann hätte ich den Bogen und könnte diesen durch CSS ändern. Das Problem bei dieser Variante ist, das der Bogen durch das GIF ziehmlich verpixelt wird, und das grössere Probloem: um das GIF Bild erscheint ein Rahmen mit der Hintergrundfarbe der Zelle obwohl Zelle und GIF exakt gleich gross ist.

Hat jemand eine Idee bzw. einen anderen Lösungsansatz?

gruss
raffi

  1. Hi,

    Nun ich will das die komplette Website durch CSS angepasst werden kann (farblich). Wenn ich nun alles ändere, wird natürlich der runde Ecken (GIF) nicht geändert.

    das verstehe ich nicht. Wenn Du alles per CSS definierst, dann doch auch die Grafiken. Warum lassen sich diese dann anschließend nicht auch im CSS anpassen?

    Ich habe mir schon div. Gedanken gemacht: z.B. in die Eck-Zelle eine Hintergrundfarbe zu setzen und dann ein GIF in die Zelle einfügen,

    content ist ein Weg, background-image ein anderer.

    Das Problem bei dieser Variante ist, das der Bogen durch das GIF ziehmlich verpixelt wird,

    Auch das verstehe ich nicht. Die Qualität der Grafik ist doch nicht davon abhängig, wie man sie einbindet...?

    um das GIF Bild erscheint ein Rahmen mit der Hintergrundfarbe der Zelle obwohl Zelle und GIF exakt gleich gross ist.

    Dann ist die Einbindung entweder suboptimal, oder Du hast vergessen, die Abstände und Rahmen richtig anzugeben.

    Cheatah

    --
    X-Will-Answer-Email: No
    1. Nun ich will das die komplette Website durch CSS angepasst werden kann (farblich). Wenn ich nun alles ändere, wird natürlich der runde Ecken (GIF) nicht geändert.

      das verstehe ich nicht. Wenn Du alles per CSS definierst, dann doch auch die Grafiken. Warum lassen sich diese dann anschließend nicht auch im CSS anpassen?

      Wie willst du die Farbe in einem GIF Bild auf CSS zugreiffen lassen? Das das geht wäre mir absolut neu.....

      Auch das verstehe ich nicht. Die Qualität der Grafik ist doch nicht davon abhängig, wie man sie einbindet...?

      Mach mal ein GIF Bild mit ner transparenten runden linie drin...Der Rand der linie wird abgehackt...wie kann man das bei GIF verhindern?

      Gruss
      raffi

      1. Hallo,

        Mach mal ein GIF Bild mit ner transparenten runden linie drin...Der Rand der linie wird abgehackt...wie kann man das bei GIF verhindern?

        Ich denke kaum, dass das möglich ist, denn das Anti-Aliasing findet immer mit einer Hintergrundfarbe statt, um diese "verpixelung" zu verhindern. Wird die Hintergrundfarbe dann geändert, sieht der transparente Rand natürlich dementsprechend sch... aus. Ist es denn dringend notwendig, die Rundungen ändern zu können? Ich sehe da wirklich keine qualitativ hochwertige Möglichkeit...

        Viele Grüße
        Ben

        --
        Fantasie ist wichtiger als Wissen. - Albert Einstein
        1. Ja ist es, da der Kunde per CMS das ganze farbliche Aussehen der Seite verändern können muss....

          gruss
          raffi

          1. Hallo Raffi,

            das ist dann natürlich ein schwierige Angelegenheit. Entweder muss man auf die Rundungen verzichten oder soetwas wie "Farbschemata" vorgeben und in diesen Kombinationen alle Rundungen als gif-Dateien vorbauen.. Eine andere Lösung sehe ich da momentan leider nicht.

            Viele Grüße
            Ben

            --
            Fantasie ist wichtiger als Wissen. - Albert Einstein
            1. Soweit bin ich eben auch schon :( Aber Farbschemata ist auch nicht optimal....255 Farben => 255 Farbschemata....viel zu aufwerndig....

              gruss
              raffi

              1. Hi,

                wäre es nicht möglich, die "Eck-Gifs" sozusagen dynamisch mit PHP erstellen zu lassen? Kenne die genauen Möglichkeiten da nicht, aber soweit ich weiß, kann man doch mit PHP auch Grafiken erstellen oder?

                Viele Grüße
                Ben

                --
                Fantasie ist wichtiger als Wissen. - Albert Einstein
                1. wie gesagt: gdlib. Du brauchst aber die Version, die noch Gif konnte...

                  1. wie gesagt: gdlib. Du brauchst aber die Version, die noch Gif konnte...

                    Braucht er nicht: Wenn er die Grafiken dynamisch erzeugt, dann kann er darauf verichten, in diesen durchsichtige Bereiche zu erzeugen. Er kann also PNG's und die aktuelle gdlib benutzen.

                    fastix

                    1. hallo,

                      Braucht er nicht: Wenn er die Grafiken dynamisch erzeugt, dann kann er darauf verichten, in diesen durchsichtige Bereiche zu erzeugen. Er kann also PNG's und die aktuelle gdlib benutzen.

                      Nur dass PNG lange nicht alle Browser können...

                      toby

                      --
                      "Trying is the first step toward failure." - H. Simpson
              2. leg dir ne alte version der gdlib zu und erstell die gif-ecken on-the-fly auf dem server, wenn es ohne nicht geht.

                aber ob das so sinnig ist?

              3. HAllo,

                Soweit bin ich eben auch schon :( Aber Farbschemata ist auch nicht optimal....255 Farben => 255 Farbschemata....viel zu aufwerndig....

                Nicht unbedingt.

                Es geht ja nur um den Antialising Effekt. Da reicht es wenn das letzte Pixel das nicht durchsichtig ist 'ähnlich' wie die Farbe ist die dann per CSS eingestellt wird. Keine Ahnung wieviele Schemata du da brauchst. Vielleicht reichen da 16 oder 32. Ist zwar immernoch 'ne menge, aber überschaubar.

                By
                Reinhard

          2. Hi,

            Ja ist es, da der Kunde per CMS das ganze farbliche Aussehen der Seite verändern können muss....

            irgendwie musst Du ja mal die Farbe der runden Ecke verändert haben.
            Also mach Dir die Arbeit und lege zu einer bestimmten Menge von Farben, die dazugehörigen gifs an und binde sie je nach Farbe ein.

            ciao
            romy

            --
            DIE ROMY AUS L. AN DER P. SAGT DANKE UND AUF WIEDERSEHEN
            ->Alles ist gut wenn es aus Schokolade ist
      2. Moin!

        Mach mal ein GIF Bild mit ner transparenten runden linie drin...Der Rand der linie wird abgehackt...wie kann man das bei GIF verhindern?

        Gar nicht.

        Aber bedenke: Deine transparente Linie erfordert, dass du den Rest des Bildes mit einer Farbe ausfüllst. Die kannst du natürlich auch nicht mit CSS festlegen.

        Cheatahs Hinweis bezog sich eher darauf, dass du, sofern eine farbliche Umgestaltung mit CSS ins Haus steht, je CSS-Style einen entsprechenden Satz von GIFs mit Ecken erzeugst und im CSS per background-image einbindest. In der HTML-Seite stehen keine GIFs. Ist natürlich ein wenig aufwendiger, als nur die CSS-Datei zu ändern, aber hilft. Außerdem hast du dann die Möglichkeit, Anti-Aliasing auf die Linie anzuwenden, damit es nicht mehr so pixelt.

        Eine Möglichkeit, Transparens unpixelig zu machen, bieten nur PNG-Grafiken an, und das leider nicht im IE (der ist bis Version 6 unfähig zu echter Alpha-Transparenz, was danach kommt, wissen wir nicht).

        - Sven Rautenberg

        --
        "Bei einer Geschichte gibt es immer vier Seiten: Deine Seite, ihre Seite, die Wahrheit und das, was wirklich passiert ist." (Rousseau)
  2. use Mosche;

    [runde Ecken]

    *ROTF*

    use Tschoe qw(Matti);

    use PS qw(SCNR);

    --
      Anyone who quotes me in their sig is an idiot. -- Rusty Russell.
    1. Hi!

      [runde Ecken]

      *ROTF*

      Das erinnert mich an diesen Idiotentest:
      Heißt es DER gerade Kurve, DIE gerade Kurve oder DAS gerade Kurve?

      VG Simon

      --
      Die Jugend ist viel zu schade für die jungen Leute.
      1. Hi,

        Das erinnert mich an diesen Idiotentest:
        Heißt es DER gerade Kurve, DIE gerade Kurve oder DAS gerade Kurve?

        ganz klar: Das _war_ gerade _eine_ Kurve.

        Cheatah ;-)

        --
        X-Will-Answer-Email: No
  3. Hi Raffi,

    das Problem hatte ich vorgestern oder so mit Aquariophile diskutiert. Der Rahmen um das Bild kommt vom Border. Man muss im Table zusätzlich zu border:0px auch border-collapse:collapse; angeben, damit die Border der Zelle und der der Tabelle zusammenfallen. Warum die sonst angezeigt werden, obwohl sie alle 0px breit sind, ist mir auch nicht klar geweorden bisher.

    Im Prinzip müsste das mit einem skalierten Bild (kleiner machen) so funktionieren, wei Du sagst. Allerdings sind die Abdeckungen dann sehr groß. Die kann man aber sicher wieder mit den z-index durch andere Elemente überlagern.

    Liebe Grüße aus http://www.braunschweig.de

    Tom

    --
    Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.