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

Sıradaki ders: Katmanlı gradyanlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler