Lineer gradyan

linear-gradient() ile doğrusal gradyanları öğrenirsin.

Lineer gradyan nedir?

Lineer gradyan, iki veya daha çok rengin bir doğru boyunca yumuşakça geçişi yapar. CSS'te linear-gradient() işleviyle yazılır. En basit biçim: linear-gradient(blue, white) — mordan alta doğru beyaza geçer.

Gradyanlar arka plan olarak kullanılır: background: linear-gradient(blue, white); yazman yeterli. Tek bir değer yerine bir renk listesi verirsin; tarayıcı geçişi kendisi çizer.

Yönü belirtmek

Gradyanın yönünü ilk argüman olarak verirsin. Anahtar sözcüklerle: to top, to right, to bottom left gibi. to top rengin alttan üste aktığını söyler.

Daha kesin denetim için açı kullanabilirsin: 45deg, 90deg, 180deg. 0deg üste, 90deg sağa, 180deg alta bakar. Açı, saatin tersi yönünde ölçülür.

Renk durakları

Gradyana eklediğin her renk bir renk durağıdır (color stop). Varsayılan olarak duraklar eşit aralıklı yerleşir: iki renk verdiysen ortada, üç renk verdiysen üçte birlik aralıklarla geçiş olur.

Bir rengin konumunu açıkça yazmak istersen blue 20% gibi renkten sonra yüzde verebilirsin. Bu, mavinin tam %20 konumunda başlamasını söyler. Geçiş yine yumuşak olur; yalnızca başlangıç noktası kayar.

Uygulama Hero arka planına lineer gradyan ekle

.hero seçicisi için bir arka plan tanımla. Değer linear-gradient() işlevi olsun; yön olarak to right, renkler olarak navy ve teal ver. Yalnızca background özelliğini kullan.

Örnek çözümü göster

/* hero arka planına gradyan ekle */
.hero {
  background: linear-gradient(to right, navy, teal);
}

Kendini test et

Hangi yazım varsayılan yönü (yukarıdan aşağı) verir?
```
background: linear-gradient(blue, white);
```
- Yönü belirtmeden yalnızca renkleri virgülle listele
- to top yaz
- to left yaz
- 45deg yaz
Cevabı göster

Yönü belirtmeden yalnızca renkleri virgülle listele — Doğru. Yön verilmezse varsayılan to bottom olur, yani yukarıdan aşağı.

Yatay yönü yaz

background: linear-gradient(____, blue, white);

Cevabı göster

background: linear-gradient(to right, blue, white);

Sıradaki ders: Radyal gradyan

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler