CSS3 - Gradient/Verlauf abgehackt bzw. in Streifen

[ChillerT]

Hallo,

ich denke der Titel müsste so ziemlich mein Problem beschreiben.

Seht selber:
Ansicht: http://jsfiddle.net/8Ya4Q/1/embedded/result/
Bearbeiten: Edit this Fiddle - jsFiddle

Der Verlauf wird leider nicht schön übergängig angezeigt, sondern in Streifen.
Kann mir vielleicht jemand sagen woran das liegt?

Vielen Dank im Voraus,
ChillerT

 

[Tronjer]

Ich sehe da nur schwarz. Aber selber verlasse ich mich auf dieses Tool bei CSS3 Gradienten:

Ultimate CSS Gradient Generator - ColorZilla.com

 

[FoXMorayn]

eine vermutung ist, dass die farben nicht in feinere farben unterteilt werden. vllt liegen sie zu nah bei einander. naja ich würds nicht machen, weil...


da ham wa den salat! eingebunden als textdatei 883bytes (GANZE 813 zeichen! vier mal so groß wie ein bild..)!
ein verlauf von 44pixel höhe hat 180bytes als bilddatei. eingebunden in die vorhandene sprite datei entfällt auch der request overhead. das ganze nur, weil sich alle wieder auf die beta versionen der css3 attribute stürzen.

nunja... mag jetzt erstmal egal sein. aber abgesehen davon, dass der verlauf hässlich ist, sehe ich da wenig fortschritt.
skalierbar ist er... und schlecht zu pflegen.

background: #1e5799; /* Old browsers */

background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */

background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799),  color-stop(50%,#2989d8), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

 

[bodil]

linear-gradient(to bottom, #181818 0%, #0F0F0F 100%)

Was versprichst du dir von den Prozentangaben? Transparenz?
Dann eher so:

linear-gradient(to bottom, rgba(24,24,24, 0), rgba(15,15,15,1))

Dass dein Verlauf dann immernoch vertikal zweigeteilt ist, liegt an der festen Breite deiner Verlaufsfläche #pvp_detail.

 

[ChillerT]

eine vermutung ist, dass die farben nicht in feinere farben unterteilt werden. vllt liegen sie zu nah bei einander. [..]

Nunja, aber ein Verlauf mit nahe beieinander ligeneden Farben muss doch trotzalledem möglich sein ...

eingebunden in die vorhandene sprite datei entfällt auch der request overhead.

Bahnhof?

Ich sehe da nur schwarz. Aber selber verlasse ich mich auf dieses Tool bei CSS3 Gradienten:
Ultimate CSS Gradient Generator - ColorZilla.com

Diesen nutze ich auch und habe auch genutzt für meinen Verlauf.

Was versprichst du dir von den Prozentangaben? Transparenz?
Dann eher so:

linear-gradient(to bottom, rgba(24,24,24, 0), rgba(15,15,15,1))

Dass dein Verlauf dann immernoch vertikal zweigeteilt ist, liegt an der festen Breite deiner Verlaufsfläche #pvp_detail.

Die Prozentangabe hat der Ultimate CSS Gradient Generator eingefügt.
Mit RGBA habe ich leider das gleiche Problem wie vorher.
Zudem was ist Falsch an der festgelegten Breite, bzw. wie löse ich das Problem?

Vielen Dank für eure Antworten :)

 

[bodil]

Vielleicht beschreibst du mal kurz, wie das ganze aussehen soll?
Ich sehe da links einen breiten schwarzen Bereich. Dass der nicht die komplette Breite der Seite ausfüllt liegt daran, dass du ihm eine feste Breite gegeben hast.
Dass zwischen den Farben #0f0f0f und #181818 kein Farbverlauf zu erkennen ist, könnte daran liegen, dass sich die Farben zu ähnlich sind. Von den 256 Graustufen, die wir hier unterscheiden können, umfasst dein Farbverlauf einen Bereich von 3%.