CSS Radyal Gradyanlar
CSS Radyal Gradyanlar
Radyal bir gradyan, merkezi tarafından tanımlanır.
Radyal bir gradyan oluşturmak için ayrıca en az iki renk durağı tanımlamanız gerekir.
Sözdizimi
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Varsayılan olarak şekil elips, boyut en uzak köşe ve konum merkezdir.
Radyal Gradyan - Eşit Aralıklı Renk Durakları (bu varsayılandır)
Aşağıdaki örnek, eşit aralıklı renk duraklarına sahip bir radyal degradeyi gösterir:
Örnek
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radyal Gradyan - Farklı Aralıklı Renk Durakları
Aşağıdaki örnek, farklı aralıklı renk duraklarına sahip bir radyal degradeyi gösterir:
Örnek
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Şekil Ayarla
Şekil parametresi şekli tanımlar. Değer çemberi veya elips alabilir. Varsayılan değer elipstir.
Aşağıdaki örnek, daire şeklinde bir radyal gradyanı göstermektedir:
Örnek
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Farklı Boyutlu Anahtar Kelimelerin Kullanımı
boyut parametresi, degradenin boyutunu tanımlar. Dört değer alabilir:
- en yakın taraf
- en uzak taraf
- en yakın köşe
- en uzak köşe
Örnek
Farklı boyutta anahtar kelimelere sahip bir radyal gradyan:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
Radyal degradeyi tekrarlama
Yinelenen-radyal-gradyan() işlevi, radyal gradyanları tekrarlamak için kullanılır:
Örnek
Yinelenen bir radyal gradyan:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}