Katmanlı gradyanlar

Birden çok gradyanı katmanlamayı öğrenirsin.

Çoklu arka plan

Bir öğeye birden çok arka plan verebilirsin; hepsi virgülle ayrılır. background: linear-gradient(...), url(...); önce gradyanı, sonra görseli katmanlar. İlk yazılan en üstte durur.

Gradyan ile görseli birlikte kullanmak yaygındır: görselin üzerine hafif bir renk geçişi serpersin. Okunabilirliği artıran bir tekniktir.

İki gradyanı katmanlamak

İki gradyanı da katmanlayabilirsin. Örneğin bir lineer gradyanın üstüne yarı saydam bir radyal gradyan serpmek için: background: radial-gradient(...), linear-gradient(...);. Radyal önce yazıldığı için üstte kalır.

Bu teknik düğmelerde ışıltı, kartlarda derinlik ya da kahraman bölgelerinde atmosfer yaratmak için kullanılır. Renkleri rgba ile saydamlaştırarak alttaki gradyanı gösterirsin.

Görselin üstüne koyu gradyan

En yaygın katmanlı kullanım, bir görselin üstüne koyu bir gradyan serpmektir. linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(foto.jpg) yazmak, görselin üzerine yarı saydam siyah bir örtü çeker.

Bu teknik, görsel üzerindeki metnin okunabilirliğini artırır. Kahraman bölgeleri, başlık şeritleri ve kart kapaklarında sıkça karşılaşırsın; özellikle beyaz yazıyı korumak için idealdir.

Uygulama Hero arka planına gradyan katmanı ekle

.hero seçicisi için iki katmanlı bir arka plan tanımla. Birinci katman linear-gradient(to bottom, rgba(0,0,0,0.4), transparent), ikinci katman url(sahil.jpg) olsun. Virgülle ayrılmış tek bir background bildirimi yaz.

Örnek çözümü göster

/* hero arka planını katmanla */
.hero {
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent), url(sahil.jpg);
}

Kendini test et

İki arka plan virgülle ayrıldığında hangisi üstte olur?
```
background: linear-gradient(...), url(bg.png);
```
- İlk yazılan (linear-gradient)
- Son yazılan (url(bg.png))
- İkisi yan yana dizilir
- Yalnızca görsel görünür, gradyan gizlenir
Cevabı göster

İlk yazılan (linear-gradient) — Doğru. Çoklu arka planlarda ilk yazılan katman en üstte durur.

Yatay lineer gradyanı ikinci katman olarak yaz

background: radial-gradient(circle, rgba(255,255,255,0.4), transparent), ____;

Cevabı göster

background: radial-gradient(circle, rgba(255,255,255,0.4), transparent), linear-gradient(to right, navy, teal);

Sıradaki ders: Özet - Düğme varyasyonları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler