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);