CSS lineer-gradyan() İşlevi
Örnek
Bu doğrusal gradyan en üstte başlar. Kırmızıya başlar, sarıya, ardından maviye geçer:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
linear-gradient() işlevi, arka plan görüntüsü olarak doğrusal bir gradyan ayarlar.
Doğrusal bir gradyan oluşturmak için en az iki renk durağı tanımlamanız gerekir. Renk durakları, aralarında yumuşak geçişler oluşturmak istediğiniz renklerdir. Degrade efektiyle birlikte bir başlangıç noktası ve yön (veya açı) da ayarlayabilirsiniz.
Doğrusal Gradyan Örneği:
Sürüm: | CSS3 |
---|
Tarayıcı Desteği
Tablodaki sayılar, işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS Sözdizimi
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Daha fazla örnek
Örnek
Soldan başlayan doğrusal bir gradyan. Kırmızıyla başlar, maviye geçer:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Örnek
Sol üstten başlayan (ve sağ alta giden) doğrusal bir gradyan:
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Örnek
Belirli bir açıya sahip doğrusal bir gradyan:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Örnek
Birden çok renk durağı olan doğrusal bir gradyan:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Örnek
Şeffaflık ile doğrusal bir gradyan:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
İlgili Sayfalar
CSS eğitimi: CSS Gradyanları