Autor: unknown
« am: Montag - 07. Januar 2008 - 15:51 Uhr »Diskussionsthread
Thema: Runde Ecken mit CSS
Gesucht wird die 'beste' Möglichkeit runde Ecken in CSS(2) zu gestalten.
Anforderungen:
1) Bilder (soweit benötigt) sind dabei erlaubt.
2) Die rounded Corners müssen auch liquid/opaque/transparent möglich sein.
3) Die entstehende Box soll skalierbar sein.
4) Eine Möglichkeit Schatten darzustellen sollte die 'perfekte' Lösung ebenfalls mitbringen.
5) (mindestens) der Contentbereich soll einen voll skalierbaren Farbverlauf haben
6) Das Ergebnis soll in allen gängigen Browsern stabil und schnell laufen.
Hier eine kleine Beispiel-Box zur Veranschaulichung:
(Transparente Box mit Farbverlauf und Schatten)
Du kannst jetzt selbst ein Bsp. vorschlagen, oder
du testest/kommentierst die schon aufgeführten Möglichkeiten.
Bitte gebt die Namen/Versionen eurer Browser mit an.
Ich stelle hier auch gleich einige vor:
Möglichkeit Nr. 1)
klick
Möglichkeit Nr. 2) klick
Möglichkeit Nr. 3) klick
Möglichkeit Nr. 4) klick
Zu 1) und 2):
Die Sliding Technik scheint nicht sehr stable zu sein.
Mir wurde schon von "zerrissener" optik berichtet.
Wenn man entsprechend gr. Screen-Resolutions mitbedient (2400*x)
dann dauert der (erstmalige) Ladevorgang entsprechend lange.
Zu 3) und 4):
Scheinen beide 'stable' zu sein.
Nr 4) ist mit einem Haufen CSS-Hacks versehen
(find ich nicht soOO prickelnd)
Schatten scheinen bei beiden nicht möglich.
[Edit]
Hier gibt es noch eine sehr schöne Übersicht zu
den möglichen Technologien (sliding, nifty, etc)
aber welche davon wirklich stable ist, ich hoffe
wir finden es heraus. klick zur Übersicht
Dein Wissen/ deine Meinung ist gefragt!
[Edit2]
Ich habe mich jetzt für ein anderes Boxsystem entschieden.
Komplett ohne Bilder, ohne Farbverlauf, ohne Transparenz, ohne Schlagschatten.
Problematik:
- Farbverlauf, Transparenz und Schlagschatten machen Probleme bei der Skalierung
- IE6 unterstützt Transparenz nicht (PNG)
- alle Fixes sind Javascriptbasierend (nee lass mal)^^
- Skalierung wird beim Safari (Mac) nicht korrekt angezeigt
Resume
In einigen Jahren, wenn alle gängigen Browser aktuelles CSS ordentlich interpretieren,
dann wird wohl auch unabhängiges Design möglich sein.
Bis dahin hat man die Qual der Wahl zwischen vielen unsicheren Fixes,
CSS-Hacks, Browser-Bugs, Stable oder Schick etc, etc.
Thema: Runde Ecken mit CSS
Gesucht wird die 'beste' Möglichkeit runde Ecken in CSS(2) zu gestalten.
Anforderungen:
1) Bilder (soweit benötigt) sind dabei erlaubt.
2) Die rounded Corners müssen auch liquid/opaque/transparent möglich sein.
3) Die entstehende Box soll skalierbar sein.
4) Eine Möglichkeit Schatten darzustellen sollte die 'perfekte' Lösung ebenfalls mitbringen.
5) (mindestens) der Contentbereich soll einen voll skalierbaren Farbverlauf haben
6) Das Ergebnis soll in allen gängigen Browsern stabil und schnell laufen.
Hier eine kleine Beispiel-Box zur Veranschaulichung:
(Transparente Box mit Farbverlauf und Schatten)
Du kannst jetzt selbst ein Bsp. vorschlagen, oder
du testest/kommentierst die schon aufgeführten Möglichkeiten.
Bitte gebt die Namen/Versionen eurer Browser mit an.
Ich stelle hier auch gleich einige vor:
Möglichkeit Nr. 1)
klickMöglichkeit Nr. 2)
klickMöglichkeit Nr. 3)
klickMöglichkeit Nr. 4)
klickZu 1) und 2):
Die Sliding Technik scheint nicht sehr stable zu sein.
Mir wurde schon von "zerrissener" optik berichtet.
Wenn man entsprechend gr. Screen-Resolutions mitbedient (2400*x)
dann dauert der (erstmalige) Ladevorgang entsprechend lange.
Zu 3) und 4):
Scheinen beide 'stable' zu sein.
Nr 4) ist mit einem Haufen CSS-Hacks versehen
(find ich nicht soOO prickelnd)
Schatten scheinen bei beiden nicht möglich.
[Edit]
Hier gibt es noch eine sehr schöne Übersicht zu
den möglichen Technologien (sliding, nifty, etc)
aber welche davon wirklich stable ist, ich hoffe
wir finden es heraus.
klick zur ÜbersichtDein Wissen/ deine Meinung ist gefragt!
[Edit2]
Ich habe mich jetzt für ein anderes Boxsystem entschieden.
Komplett ohne Bilder, ohne Farbverlauf, ohne Transparenz, ohne Schlagschatten.
Problematik:
- Farbverlauf, Transparenz und Schlagschatten machen Probleme bei der Skalierung
- IE6 unterstützt Transparenz nicht (PNG)
- alle Fixes sind Javascriptbasierend (nee lass mal)^^
- Skalierung wird beim Safari (Mac) nicht korrekt angezeigt
Resume
In einigen Jahren, wenn alle gängigen Browser aktuelles CSS ordentlich interpretieren,
dann wird wohl auch unabhängiges Design möglich sein.
Bis dahin hat man die Qual der Wahl zwischen vielen unsicheren Fixes,
CSS-Hacks, Browser-Bugs, Stable oder Schick etc, etc.
