Renk durakları
Color stop konumlandırmayı öğrenirsin.
Renk durağı konumları
Renk duraklarının konumunu yüzde ya da uzunluk birimiyle verebilirsin. linear-gradient(to right, blue 10%, white 90%) mavinin %10'da, beyazın %90'da başlamasını söyler. Aradaki geçiş bu iki nokta arasında çizilir.
Konum yazmazsan duraklar eşit dağılır. Konum verdiğindeyse tarayıcı yalnızca başlangıç ve bitiş noktalarını kayar; geçişin yumuşaklığı bozulmaz.
Gradyan ipucu
İki durak arasında geçişin nerede yoğunlaştığını denetlemek için gradyan ipucu (gradient hint) kullanırsın. Yazımı: iki renk arasında tek bir yüzde. linear-gradient(blue, 30%, white) geçişin %30 noktasında yoğunlaşmasını söyler.
Bu, yalnızca baş ve son renkleri verip araya bir konum sıkıştırmanın kısa yoludur. Özellikle ışık ve gölge geçişlerinde ince ayar için yararlıdır.
Uygulama Kart arka planına konumlu gradyan ekle
.card-hero seçicisi için bir arka plan tanımla. Değer linear-gradient() işlevi olsun; yön to bottom, renkler navy 10% ve teal 90% olsun. Yalnızca background özelliğini kullan.
Örnek çözümü göster
/* kart arka planına konumlu gradyan */
.card-hero {
background: linear-gradient(to bottom, navy 10%, teal 90%);
}Kendini test et
-
blue 20% ne anlama gelir?
linear-gradient(to right, blue 20%, white);- Mavinin genişliği %20 olur
- Mavinin opaklığı %20 olur
- Mavi %20'de biter
- Mavinin geçişi %20 konumunda başlar
Cevabı göster
Mavinin geçişi %20 konumunda başlar — Doğru. blue 20%, mavinin geçişinin %20 konumunda başladığını söyler.
-
Renk durağına yüzde konum ekle
background: linear-gradient(to right, blue ____, white);Cevabı göster
background: linear-gradient(to right, blue 20%, white); -
Konum yazımını anlamına eşle
- 20%
- Yüzde konum
- 50px
- Uzunluk konumu
- from 0deg
- Açısal başlangıç
- at center
- Merkez konumu