linear-gradient fonksiyonu
linear-gradient fonksiyonu, doğrusal bir
degrade oluşturur. Arka plan resmi belirten özelliklere uygulanır:
background,
background-image
veya kenarlık resmi belirten özelliklere: border-image,
background-image-source.
Sözdizimi
seçici {
background: linear-gradient([açı veya yön], renk1 boyut1, renk2 boyut2...);
}
Değerler
| Değer | Açıklama |
|---|---|
| yön |
Degradenin belirli bir yönünü, herhangi bir açı birimi
ile veya top, left, right, bottom anahtar kelimeleri
ya da bunların kombinasyonu ile belirtir: top left, top right vb.
Kelimelerin sırası önemli değildir: top left ve left top yazılabilir,
fark yoktur. Bu parametre isteğe bağlıdır: belirtilmezse, degrade
yukarıdan aşağıya doğru gider (to top ile aynı). Yönün önüne to kelimesi getirilir.
|
| açı | Herhangi bir açı birimi cinsinden açı. Pozitif veya negatif olabilir. Parametre isteğe bağlıdır. Aynı anda açı veya yön belirtilebilir (veya hiçbiri belirtilmeyebilir). |
| renk1 | Herhangi bir renk birimi cinsinden degradenin başlangıç rengi. |
| renk2 | Herhangi bir renk birimi cinsinden degradenin bitiş rengi. |
| boyut | Belirli bir degrad renginin uzunluğunu herhangi bir boyut birimi cinsinden belirtir. |
Örnek . En basit seçenek
Sözdizimi:
seçici {
background: linear-gradient(başlangıç rengi, bitiş rengi);
}
Bir örnekle inceleyelim:
<div id="elem"></div>
#elem {
background: linear-gradient(siyah, kırmızı);
width: 200px;
height: 200px;
}
:
Örnek . Açı ekliyoruz
Sözdizimi:
seçici {
background: linear-gradient(açı, başlangıç rengi, bitiş rengi);
}
Bir örnekle inceleyelim:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, siyah, kırmızı);
width: 200px;
height: 200px;
}
:
Örnek . Yön ekliyoruz
Açı yerine top, left, right, bottom
yönlerini veya bunların kombinasyonunu ekleyebiliriz: top left, top right
Yönün önüne to kelimesi getirilir.
Sözdizimi:
seçici {
background: linear-gradient(yön, başlangıç rengi, bitiş rengi);
}
Bir örnekle inceleyelim:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, siyah, kırmızı);
width: 200px;
height: 200px;
}
:
Örnek . Yön ekliyoruz
Farklı bir yön belirtelim:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, siyah, kırmızı);
width: 200px;
height: 200px;
}
:
Örnek . Boyut ekliyoruz
Sözdizimi:
seçici {
background: linear-gradient(renk1 boyut1, renk2 boyut2);
}
Sonraki örnekte davranış şu şekilde olacaktır:
saf kırmızı renk 0px'den
30px'ye kadar, 30px'den 50px'ye kadar
kırmızıdan maviye degrade olacak ve
50px'den sonra - saf mavi:
<div id="elem"></div>
#elem {
background: linear-gradient(kırmızı 30px, mavi 50px);
width: 200px;
height: 200px;
}
:
Örnek . 2'den fazla renk ekliyoruz
Sözdizimi:
seçici {
background: linear-gradient(renk1 boyut1, renk2 boyut2, renk3 boyut3...);
}
Sonraki örnekte davranış şu şekilde olacaktır:
saf kırmızı renk 0px'den
30px'ye kadar, 30px'den 50px'ye kadar
kırmızıdan maviye degrade olacak,
50px'den 70px'ye kadar - maviden yeşile
degrade olacak ve 70px'den sonra - saf yeşil:
<div id="elem"></div>
#elem {
background: linear-gradient(kırmızı 30px, mavi 50px, yeşil 70px);
width: 200px;
height: 200px;
}
:
Örnek . Keskin geçişler
Sonraki örnekte davranış şu şekilde olacaktır:
saf kırmızı renk 0px'den
30px'ye kadar, saf mavi - 30px'den
60px'ye kadar, saf yeşil - 60px'den sonra
(red 0px yazılmasına gerek yoktur):
<div id="elem"></div>
#elem {
background: linear-gradient(kırmızı 0px, kırmızı 30px, mavi 30px, mavi 60px, yeşil 60px);
width: 200px;
height: 200px;
}
:
Örnek . Boyutlar yüzde olarak da belirtilebilir
Sonraki örnekte davranış şu şekilde olacaktır:
saf kırmızı renk 0%'den
30%'ye kadar, saf mavi - 30%'den
60%'ye kadar, saf yeşil - 60%'den sonra
(red 0% yazılmasına gerek yoktur):
<div id="elem"></div>
#elem {
background: linear-gradient(kırmızı 0%, kırmızı 30%, mavi 30%, mavi 60%, yeşil 60%);
width: 200px;
height: 200px;
}
:
Örnek . background-size ile kombinasyon
Sonraki örnekte davranış şu şekilde olacaktır:
saf kırmızı renk 0px'den
30px'ye kadar, saf mavi - 30px'den
60px'ye kadar, bunların hepsi 60px'lik
parçalar halinde tekrarlanacaktır (background-size:
60px; nedeniyle):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, kırmızı 30px, mavi 30px, mavi 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Ayrıca bakınız
-
radial-gradientfonksiyonu,
dairesel degrade oluşturur -
repeating-linear-gradientfonksiyonu,
tekrarlanan doğrusal degrade oluşturur -
repeating-radial-gradientfonksiyonu,
tekrarlanan dairesel degrade oluşturur
