radial-gradient Fonksiyonu
radial-gradient fonksiyonu bir radyal
gradyan tanımlar. Bu fonksiyon, arka plan resmi tanımlayan özelliklere uygulanır:
background,
background-image
veya kenarlık resmi tanımlayan özelliklere: border-image,
background-image-source.
Sözdizimi
seçici {
background: radial-gradient([şekil tip konum], renk1 boyut1, renk2 boyut2...);
}
Değerler
| Değer | Açıklama |
|---|---|
| şekil |
Kabul edilen değerler:
ellipse eliptik gradyan (varsayılan),
circle dairesel gradyan.
|
| tip |
Gradyanın genişlemesini belirtir.
Kabul edilen değerler:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| konum |
at anahtar kelimesinden sonra
herhangi bir boyut birimi
veya top, bottom,
left, right, center
anahtar kelimelerinin çeşitli kombinasyonları kullanılarak konum belirtilir.
|
| renk1 | Herhangi bir renk biriminde gradyanın başlangıç rengi. |
| renk2 | Herhangi bir renk biriminde gradyanın bitiş rengi. |
| boyut | Gradyanın belirli bir renginin genişliğini herhangi bir boyut biriminde belirtir. |
Tip için Değerler
| Değer | Açıklama |
|---|---|
closest-side |
Gradyanın şekli, bloğun kendisine en yakın kenarı ile çakışır. |
closest-corner |
Gradyanın şekli, en yakın köşeye olan mesafe bilgisine dayanarak hesaplanır. |
farthest-side |
Gradyan bloğun uzak kenarına kadar yayılır. |
farthest-corner |
Gradyanın şekli, en uzak köşeye olan mesafe bilgisine dayanarak hesaplanır. |
Not
Tip ve şekil yer değiştirebilir, ancak konum ilk parametrenin sonunda gelmelidir. Gradyan tipi ve boyutu birlikte çalışmaz (mantıklı, çünkü çakışıyorlar). Kazanan boyut olur.
Örnek . En basit varyant
Sadece başlangıç ve bitiş rengini belirleyelim:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Örnek . Konum ekleyelim
Merkezin konumunu belirleyelim:
30px - soldan boşluk, 100px - üstten boşluk:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Örnek . Yüzde olarak konum
Merkezin konumunu yüzde olarak belirleyelim:
30% - soldan boşluk, 50% - üstten boşluk:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Örnek . Anahtar kelime ile konum
top, bottom, left,
right, center anahtar kelimeleri
çeşitli kombinasyonlarda kullanılabilir.
Örneğin, gradyanı sağda ortaya yerleştirelim:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Örnek . Gradyan boyutu
Bu durumda gradyan şu şekilde çalışacak:
0px ile 20px arasında tam
kırmızı renk, 20px ile 60px arasında - kırmızıdan
maviye gradyan, 60px sonrasında - tam
mavi:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Örnek . Ardışık birkaç renk
Bu durumda gradyan şu şekilde çalışacak:
0px ile 20px arasında tam
kırmızı renk, 20px ile 40px arasında
tam mavi renk, 40px
ile 60px arasında - maviden yeşile gradyan,
60px sonrasında - tam yeşil:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Örnek . Boyut + konum
Aynı anda farklı renkler için boyutları ve gradyan merkezinin konumunu belirleyelim:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Örnek . Gradyan şekli
Gradyan şekli ilk parametre ile
belirlenir ve 2 değer alabilir: circle
(dairesel gradyan) veya ellipse (eliptik
gradyan, varsayılan). Peki neden şu ana kadar
elips gradyanlar görmedik, halbuki
varsayılan olarak ayarlanmış? Çünkü şu ana kadar
blokların şekli kareydi. Eğer şekli
dikdörtgen yaparsak, eliptik gradyanı
göreceğiz:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Örnek . Yuvarlak gradyan
Dikdörtgen bir blokta yuvarlak gradyan yapalım.
Bunun için ilk parametre olarak
circle anahtar kelimesi ile gradyanın şeklini
belirleyelim:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Örnek . Konum ekleyelim
Önceki koda gradyan konumu da ekleyelim:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Örnek . Tip farthest-corner + circle
Gradyanın şekli, bloğun en uzak köşesine olan mesafe bilgisine dayanarak hesaplanır:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Örnek . Tip farthest-corner + ellipse
Gradyanın şekli, bloğun en uzak köşesine olan mesafe bilgisine dayanarak hesaplanır:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Örnek . Tip farthest-side + circle
Gradyan bloğun en uzak kenarına kadar yayılır:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Örnek . Tip farthest-side + ellipse
Gradyan bloğun en uzak kenarına kadar yayılır:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Örnek . Tip closest-corner + circle
Gradyanın şekli, bloğun en yakın köşesine olan mesafe bilgisine dayanarak hesaplanır:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Örnek . Tip closest-corner + ellipse
Gradyanın şekli, bloğun en yakın köşesine olan mesafe bilgisine dayanarak hesaplanır:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Örnek . Tip closest-side + circle
Gradyanın şekli, bloğun kendisine en yakın kenarı ile çakışır:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Örnek . Tip closest-side + ellipse
Gradyanın şekli, bloğun kendisine en yakın kenarı ile çakışır:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ayrıca Bakınız
-
doğrusal gradyan oluşturan
linear-gradientfonksiyonu,
-
tekrarlayan doğrusal gradyan oluşturan
repeating-linear-gradientfonksiyonu,
-
tekrarlayan radyal gradyan oluşturan
repeating-radial-gradientfonksiyonu,
