CSS ile Verlauf Yapma - Renk Geçişi Yapma

[RasitTunca]

CSS ile Verlauf Yapma - Renk Geçişi Yapma

White yazan yer  birinci renk balck yazan yer ikinci renk bunlari diger renk isimleri ile değiştirerek istediğiniz verleufu oluşturabilirsiniz

Code:

background-image: linear-gradient(to top, white 0%, black 50%)
background-image: linear-gradient(to right, white 0%, black 50%)
background-image: linear-gradient(45deg, white 0%, black 50%)

Ein Gradient oder Verlauf ist eine gedachte Linie, auf der Farbunterbrechungen (Color Stops) liegen. Im einfachsten Fall gibt es zwei Farbunterbrechungen in einem Verlauf. An jedem Color Stop beginnt eine Farbe, die bis zum nächsten Color Stop in die andere Farbe verläuft.

Anstelle von background-image: gradient kann auch background: gradient als Kurzschrift benutzt werden. Farben können als RGB-, HSL-, Hexwerte oder als Farbnamen angegeben werden.

Color Stops legen durch eine %-Angabe fest, an welcher Stelle der Verlauf beginnt. Für einen sauberen weichen Verlauf müssen die Color Stops also von links nach rechts immer höhere Werte aufweisen.

Code:

background-image: linear-gradient(90deg, cornflowerblue 0%, wheat 50%)

repeating-linear-gradient

repeating-linear-gradient wiederholt einen Verlauf anstelle einer langen Liste von Color Stops.

Code:

.bar { background-image:
      repeating-linear-gradient(45deg,
                               white 0%,
                               white 2%, cyan 2%,
                               cyan 4%, white 4%);
}

Die harten Übergänge der Diagonalen entstehen, weil die Color Stops auf dieselbe Stelle fallen.

Gradient von transparent zu Farbe

Mit HSL- und RGB-Farbangaben führt der Verlauf auch von der Farbe zur Transparenz. Die Color Stops werden einmal ohne und einmal mit Alpha-Wert angegeben.

Code:

background-image: linear-gradient(
  hsla(215,30%,70%,0) 20%,
  hsl(215,30%,70%) 70%
);

Alte Syntax / Neue Syntax

Ältere Browser brauchen noch einen Browser-Präfix (-webkit, -moz, -ms, -o) und eine ältere Syntax. Da linear gradient ein Wert von background-image ist, benutzte die alte Syntax die Positionsangaben für background-image (z.b. top left, bottom right).

Code:

background-image: -webkit-linear-gradient(top left, white 0%, #9FBFD2 100%);
background-image: -moz-linear-gradient(right bottom, white 0%, #9FBFD2 100%);

Die modernen Browser setzen den CSS-Stil gradient für einfache Verläufe stabil mit konsistenter Syntax um. Anstelle der Positionsangabe aus background-image setzt die neue Syntax die Richtung des Verlaufs (z.B. to top, to left, to bottom left). Die Angabe der Richtung durch den Kreiswinkel bleibt auch in der neuen Syntax dieselbe wie gehabt.

Zwischen linear-gradient und der öffnenden Klammer darf kein Leerzeichen oder Zeilenumbruch stehen, sonst interpretiert der Browser den CSS-Stil nicht.

Per Vorgabe läuft der Verlauf von oben senkrecht nach unten (to bottom). Die minimalen Angaben sind Start- und Ende-Color-Stop.

Code:

background-image:linear-gradient( white, black)
background-image:linear-gradient(to left, navy, green)
background-image:linear-gradient(to bottom left, yellow, red)

background-image:linear-gradient(0deg, yellow 5%, orange 70%)
background-image:linear-gradient(270deg, blue 5%, pink 80%)
background-image:linear-gradient(135deg, olive 20%, seashell 70%)

Die Richtung des Verlaufs wird entweder durch Schlüsselwörter (z.B. to top) oder durch den Winkel des Verlaufs (z.B. 45deg) geändert.

Code:

background-image:
linear-gradient (90deg, purple, blue, green, yellow, red, purple);

Wenn die Position des Color Stops nicht angegeben wird, verteilt der Browser die Color Stops automatisch auf der Strecke des Verlaufs.


Verläufe in Internet Explorer

Internet Explorer unterstützt CSS linear-gradient ab Version 10. Ältere Version von IE können ebenfalls Verläufe darstellen, allerdings bis einschließlich Version 9 nicht als CSS-Stil mit background-image, sondern als filter.

Code:

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr='#ccc',
  endColorstr='#eee');