Zusätzlich noch ein linear-gradient Problem

[Gunnar Bittersmann]

@@Melina:

nuqneH

Das glaub ich nicht. Auf deinem System mag es gut aussehen, bei anderen sieht es völlig anders aus.

Aber wie kann ich es erreichen, dass ich auf dem Handy den Verlauf ebenfalls zu sehen bekomme?

So. Aber das meinte ich mit „bei anderen sieht es völlig anders aus“ überhaupt nicht.

Wenn du dir Link 1 und Link 2 in zwei Fenstern aufmachst und hin und her wechselst, siehst du dass der Verlauf bei Link 3 länger ist, als in Link 1 und dieses ist unschön, richtig ist er auf Link 1 so sollte er auch auf Link 2 aussehen.

Andere haben ihren Bildschirm hochkant gedreht. Dann ist der Verlauf auch bei wenig „Inhalt“ (von welchem Inhalt redest du hier?) länger, was du „unschön“ findest.

Deshalb noch einmal die Frage:

Wie genau soll es denn aussehen? Wo soll der Übergang von grau zu ocker sein?

Ich vermute, du willst den Wechsel von grau zu ocker an der Höhe deines Kopfbereiches festmachen, nicht an der Höhe des Viewports.

Also muss ich hier mit PX arbeiten?

Nein. Vergiss, dass es sowas wie Pixel gibt. Auch max-width von body sollte nicht in px, sondern in em angegeben werden.

Du musst mit der Einheit arbeiten, die die Höhe deines Kopfbereiches bestimmt.

Ist mir auch schon aufgefallen, wenn ich von Hand ein paar lösche, sehe ich allerdings gar kein Verlauf mehr, also habe ich die drin gelassen. Von Hand kann ich so ein Verlauf nicht schreiben, daher habe ich das oben genannte Tool verwendet.

Man sollte das Tool, das man verwendet, aber auch beherrschen. Oder ein anderes verwenden.

Deinen (oder den des Tools) mal auseinandergenommen:
linear-gradient(to bottom, rgba(254,254,254,1) 1%,rgba(227,233,239,1) 27%, …

Hier ist erstmal die Farbe rgba(254,254,254,1) von 0 bis 1%, zwischen 1% und 27% geht sie allmählich in rgba(227,233,239,1) über.

… rgba(227,233,239,1) 27%,rgba(227,233,239,1) 27%,rgba(227,233,239,1) 27%, …

Dann springt sie um auf – dieselbe Farbe. Und nochmal. Und nochmal. Unsinn; weg damit!

… rgba(227,233,239,1) 30%, …

Dann bleibt die Farbe sie zwischen 27% und 30% gleich.

… rgba(227,233,239,1) 30%, …

Um nochmal auf denselben Wert zu springen??

… rgba(230,196,90,1) 30%, …

Hier ändert sich der Farbwert deutlich. Das ist der Wechsel von grau zu ocker.

… rgba(230,196,90,1) 30%,rgba(230,196,90,1) 30%, …

Und nochmal ocker. Und nochmal. Unsinn, s.o.

… rgba(227,233,239,1) 30%, …

Ach ne, doch nicht ocker. Wir bleiben doch bei grau.

… rgba(230,196,90,1) 30%, …

Ach ne, doch nicht grau. Wir wechseln doch zu ocker.

… rgba(227,233,239,1) 30%, …

Ach ne, doch nicht.

… rgba(230,196,90,1) 30%, …

Ach doch.

… rgba(227,233,239,1) 30%,rgba(230,196,90,1) 30%,rgba(227,233,239,1) 30%,rgba(230,196,90,1) 30%, …

Ach doch nicht. Ach doch. Ach doch nicht. Ach doch.

Schmeiß dieses Tool weg!

… rgba(230,196,90,1) 100%);

Zwischen 30% und 100% bleibt die Farbe rgba(230,196,90,1). Die Angabe wäre dann überflüssig; am Anfang stand ja auch nicht 'to bottom, rgba(254,254,254,1) 0%, rgba(254,254,254,1) 1%'.

Das Ganze ist also:
linear-gradient(to bottom, rgba(254,254,254,1) 1%, rgba(227,233,239,1) 27%, rgba(227,233,239,1) 30%, rgba(230,196,90,1) 30%).

Die Angabe als rgba ist unsinnig, wenn die Opazität überall 1 ist. Also besser:
linear-gradient(to bottom, rgb(254,254,254) 1%, rgb(227,233,239) 27%, rgb(227,233,239) 30%, rgb(230,196,90) 30%).

Ich vermute, dass die Farbe zwischen 0 und 1% und 27% und 30% gleich bleibt, ist nicht zu sehen. Du kannnnst den allmählichen Übergang statt zwischen 1% und 27% auch zwischen 0 und 30% machen:
linear-gradient(to bottom, rgb(254,254,254), rgb(227,233,239) 30%, rgb(230,196,90) 30%).

Mal abgesehen davon, dass du sie Stelle des Wechsels von grau zu ocker nicht in Prozent angeben willst, s.o.

Qapla'