Runde Ecken
Raffi
- programmiertechnik
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
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
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
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
Ja ist es, da der Kunde per CMS das ganze farbliche Aussehen der Seite verändern können muss....
gruss
raffi
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
Soweit bin ich eben auch schon :( Aber Farbschemata ist auch nicht optimal....255 Farben => 255 Farbschemata....viel zu aufwerndig....
gruss
raffi
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
wie gesagt: gdlib. Du brauchst aber die Version, die noch Gif konnte...
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
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
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?
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
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
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
use Mosche;
[runde Ecken]
*ROTF*
use Tschoe qw(Matti);
use PS qw(SCNR);
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
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 ;-)
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