CSS (radial)-gradient Qualität
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktuelle browser
bau
beschleunigung
bestimmte kombinationen
browser
chrom
code
erweiterten einstellungen
funktion
image
machen
opus
problem
sagen
stufe
tun
url
verbesserung
version
verwenden
-
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! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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. -
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. -
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage