Farbverläufe mittels CSS oder Myrphys Gesetz

Annihilator · 05.11.2011

Hallo @llerseits,

Ich wollte mittels CSS einen Farbverlauf als Background erstellen und benutzte folgenden Code (natürlich ohne Ausrufezeichen):

!<html>
! <head>
! <style type="text/css">
! body { background:-moz-linear-gradient(left, #ffdd00, #ffffff); /* Firefox */
! background:-webkit-gradient(linear, left, right, from(#ffdd00), to(#ffffff)); /* Safari, Chrome */
! background:-webkit-linear-gradient(left, #ffdd00, #ffffff); /* Safari, Chrome - neue Syntax! */
! background:-o-linear-gradient(left, #ffdd00, #ffffff); /* Opera */
! filter: progid: DXImageTransform.Microsoft.gradient(start Colorstr='#ffdd00', endColorstr='#ffffff', gradientType='1'); /* Internet Explorer */
! background:linear-gradient(left, #ffdd00, #ffffff); /* W3C Standard */
! }
! </style>
! </head>
!</html>

Jetzt sieht es im Firfox so aus:

so weit so gut.

Opera präsentiert das:

kann man lassen.

und der Internet Explorer zeigt das hier:

???????????????????

Kann mur einer helfen?

Gruß Annihilator

simonpicos · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Ich habe gerade mal deinen Code ausprobiert, bei mir zeigt der gute alte IE gar nichts an... (v.10 & 9)

Mit deinem Problem kann ich dir jetzt so nicht helfen, allerdings ist der IE sowieso nicht gerade für seine excellente Unterstützung von modernen Webtechniken bekannt..

Aber grundsätzlich kann ich dir für CSS-Gradients Das hier nur wärmstens empfehlen.
Damit hast du eine größtmögliche Browserabdeckung.

piepel · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

IE9 ist ein Sonderfall. Geht nur mit SVG.
http://maddesigns.de/wp-content/uploads/2011/03/linear-gradient-beispiel-ie9.html

Zieh die den Quelltext incl. der dort angegebenen "gradients.svg" und pass dir das an.

simonpicos · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

piepel schrieb:
IE9 ist ein Sonderfall. Geht nur mit SVG.
http://maddesigns.de/wp-content/uploads/2011/03/linear-gradient-beispiel-ie9.html

Zieh die den Quelltext incl. der dort angegebenen "gradients.svg" und pass dir das an.

Ich habe gerade gesehen, dass mein verlinkter generator auch neuerdings eine Möglichkeit besitzt den Verlauf via svg für den IE9 anzupassen...

ckaiser · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Warum so umständlich?

Bildbearbeitung Gimp kostenlos downloaden, Farbverlauf herstellen, Datei in HTML einfügen.

simonpicos · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

ckaiser schrieb:
Warum so umständlich?

Dateigröße? Und es ist doch nicht umständlich auf einer Seite schnell zwei Farben anzugeben und dann den Code zu kopieren:uhm:

piepel · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

simonpicos schrieb:
Ich habe gerade gesehen, dass mein verlinkter generator auch neuerdings eine Möglichkeit besitzt den Verlauf via svg für den IE9 anzupassen...

Jo, so machr der Sinn. Hab das mal gecheckt.
Einziger Wermutstropfen - zumindest bei meinem IE9:
Bei eingeschaltetem ActiveX ergibt sich ein etwas anderer Verlaufsstreifen am oberen Rand.
Dateigrösse: macht 15-20 Zeilen Code mehr. Da macht ein Streifen Bild keine Konkurrenz mehr.

ckaiser · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Wenns denn klappt

piepel · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

ckaiser schrieb:
Wenns denn klappt

Hast insofern Recht, das ein Bild browserübergreifend immer funktioniert.
Trotzdem ist CSS-Ansatz der bessere. Wenn die Browser sich einigen könnten, dann ist ein Bild wirklich nicht mehr nötig. Und wem es gefallen würde einen radialen Verlauf für seinen Hintergrund zu bevorzugen

, dem wär auch geholfen

ckaiser · 05.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Dem kann ich uneingeschränkt zustimmen.

Moo61 · 06.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Wie wäre es denn bei diesem Verlauf mit PS zu arbeiten?
Statt ein ganzes Bild zu nehmen einfach einen Balken mit Verlauf und festen Maßen kreiren und in CSS repeat: y-repeat.
Kleine Dateigröße, schnell geladen und auch von älteren Browsern ohne Hacks darstellbar.

piepel · 06.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Moo61 schrieb:
Wie wäre es denn bei diesem Verlauf mit PS zu arbeiten?
Statt ein ganzes Bild zu nehmen einfach einen Balken mit Verlauf und festen Maßen kreiren und in CSS repeat: y-repeat.
Kleine Dateigröße, schnell geladen und auch von älteren Browsern ohne Hacks darstellbar.

Weil es dem Fragesteller wohl darum ging die Sache nur mit CSS zu lösen.

Myhar · 07.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Außerdem wurde diese Lösung schon 6 Beiträge vor deinem gepostet.

Zu dem IE Problem: Es ist für einfache Verläufe mit 2 Farben nicht notwendig, auf SVG zurückzugreifen. Diese einfachen Verläufe unterstützt der IE schon seit Version 6 (allerdings nur mit der proprietären filter Anweisung). Das Problem mit dem blauen Verlauf lässt auf einen syntaxfehler bei der CSS deklaration für den IE hinschließen, dieses Blau sind nämlich die Standardfarben für den Verlauf beim IE.
Am Besten, mit den IE Developer Tools schauen, welche Werte dein Verlauf im IE hat.
Des Weiteren ist es noch hilfreich zu wissen, dass Elemente mit Verläufen auch eine Höhe (bzw. konkreter eigentlich Layout) benötigen, insbesondere in älteren IE Versionen. Das ist hier aber nicht das Problem , da der Verlauf sonst überhaupt nicht dargestellt wäre.

Edit:
Der IE kennt . Versichere dich, dass du beide Varianten im CSS angibst.

L. G.

Annihilator · 09.11.2011

AW: Farbverläufe mittels CSS oder Myrphys Gesetz

Hi(gh) @ll!

Erst mal recht herzlichen Dank für Eure Mühe und Antworten.

Warum ich kein Hintergrundbild als Verlauf benutze liegt daran, daß nicht jeder User mit der gleichen Aufflösung suft. Ich wollte keine Wiederholung des Verlaufes, da sonst der linke Rand unmittelbar an den rechten Rand angelegt wird und dieser abrupte Übergang vermieden werden soll. Auch die Idee den Verlauf gelb-weiß-gelb zu machen um die Barriere dann zu überwinden, mißfiel mir, da dann zuviel Gelb orhanden ist.

Ich wollte einfach einen Verlauf von gelb nach weiß, egal welcher Browser und welche Auflösung benutzt wird.

Und jetzt funktionierts, dank Colorzilla und simonpicos!
D a n k e !!!

Ach, thanks at @ll.

Gruß Annihilator!