kostenloser Webspace werbefrei: lima-city


CSS (radial)-gradient Qualität

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    o************n

    Hey,
    ich baue gerade an der Website für unsere Band (www.orange-session.de). Als Hintergrund verwende ich ein radial-gradient:
    background-image: radial-gradient(circle farthest-corner at bottom right, #420, #000);

    Im Chromium sieht das super aus, im FF und Opera ist die Qualität allerdings sehr bescheiden, die Farbübergänge sind extrem schlecht. Gibt es eine (einfache) Möglichkeit die Qualität zu verbessern? Oder liegt das an FF + Linux + ATI? Im Chromium hab ich die Hardwarebeschleunigung erzwungen, im FF ist mir keine solche Funktion bekannt.
    Danke schonmal!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Ich habe deinen Gradient unter W7 mit Google Chrome und FF getestet - mit ähnlichen Ergbnissen: Chrom sehr gut, FF Übergänge mit Stufen.

    Beim Windows FF gibt es in den erweiterten Einstellungen unter Allgemein die Option "Hardware-beschleunigung verwenden, wenn verfügbar". Bezogen auf dein Beispiel brachte die aber keine Verbesserung.

    Anscheinend kann der FF bestimmte Kombinationen nicht so gut rendern. So sieht z.B.


    background-image: radial-gradient(circle farthest-corner at 1px 1px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%)

    nicht so ungleichmäßig aus.

    Beitrag zuletzt geändert: 8.7.2014 16:37:41 von mein-wunschname
  4. Autor dieses Themas

    o************n

    Danke für deine Antwort, das hilft allerdings leider allles nicht so wirklich weiter. Die Hardwarebeschleunigungsoption im FF kenne ich, allerdings erzwingt die die HW-Beschleunigung nicht, deswegen war ich mir nicht sicher, obs vielleicht einfach nur an meinem Setup liegt. Unter W7 sollte sie allerdings schon funktionieren, darum liegt das Problem dann wohl doch eher beim FF. Ich hab das Gradient jetzt durch einen reinen Alphafade ersetzt, d.h. es sieht jetzt so aus:
    background-image: radial-gradient(circle farthest-corner at bottom right, rgba(68,37,0,1), rgba(68,37,0,0));

    Ich dachte, dass der FF zumindest mal stufenloses Alphafading hinbekommen sollte aber denkste... Sieht immer noch genauso aus wie zuvor und eine andere Farbe will ich nicht verwenden. Images als gradient zu verwenden finde ich auch eher unpraktisch, da CSS einfach anpassungsfähiger ist. Sieht also so aus, als ob ich mit dem Problem leben müsste.
  5. h***e

    Da fällt mir sofort was auf.
    Dein Code ist nicht für den Browser optimiert.
    http://www.w3schools.com/css/css3_gradients.asp
    Versuche es mal so wie hir beschrieben ich habe es Nicht getestet darum kann ich es dir nicht sagen ob es was bringt oder nicht.
  6. Autor dieses Themas

    o************n

    Na ja das hat ja wohl weniger mit Browser optimiert zu tun. Die vendorspezifischen Prefixes werden verwendet wenn ein Browser die Funktion noch nicht 100% standardkonform unterstützt. Auf der Seite steht ja auch FF bis Version 16, aktuell ist 29 oder so. Deswegen hab ich mir auch noch nicht die Mühe gemacht da alle Browser Versionen zu unterstützen, da aktuelle Browser das auch so tun. Ich werds nachher mal ausprobieren, denke aber nicht, dass das viel ändert.

    Edit: also wie ich vermutet habe, macht -moz-radial-gradient keinerlei unterschied.

    Beitrag zuletzt geändert: 10.7.2014 18:28:50 von orange-session
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!