Radyal gradyan

radial-gradient() ile dairesel gradyanları öğrenirsin.

Radyal gradyan nedir?

Radyal gradyan, bir merkezden dışa doğru yayılan bir daire ya da elips biçiminde geçiş yapar. radial-gradient() işleviyle yazılır. radial-gradient(white, navy) ortası beyaz, dışı mavi bir daire verir.

En yaygın kullanım düğme üzerindeki ışık efekti veya bir simge arkasındaki parıltıdır. Merkezden kenara yumuşak bir geçiş istediğinde radyal gradyan doğru seçimdir.

Biçim ve konum

Radyal gradyanın biçimini ilk argüman olarak verirsin: circle ya da ellipse. circle kusursuz bir daire; ellipse öğenin boyutlarına uyan bir elips çizer.

Biçimden sonra at ile merkez konumu belirtebilirsin. circle at top left sol üst köşeden yayılan bir daire verir. Konum yazmazsan tarayıcı merkez varsayar.

Uygulama Simge halo efekti ekle

.icon-glow seçicisi için bir arka plan tanımla. Değer radial-gradient() işlevi olsun; circle at center ile başlasın, sonra rgba(255,255,255,0.9) ve transparent renklerini virgülle listele. Yalnızca background özelliğini kullan.

Örnek çözümü göster

/* simge halo efekti */
.icon-glow {
  background: radial-gradient(circle at center, rgba(255,255,255,0.9), transparent);
}

Kendini test et

radial-gradient() için hangisi geçerli bir yazımdır?
- radial-gradient to top white navy
- radial-gradient(rotate(45), white, navy)
- radial-gradient(circle at center, white, navy)
- radial-gradient(white, navy;)
Cevabı göster

radial-gradient(circle at center, white, navy) — Doğru. radial-gradient() önce biçim ve konum, sonra renk duraklarını alır.

Radyal gradyanı daire biçiminde yaz

background: radial-gradient(____, white, navy);

Cevabı göster

background: radial-gradient(circle, white, navy);

Anahtar sözcüğü anlamına eşle

circle

Kusursuz daire
ellipse

Öğeye uyan elips
at center

Orta nokta
farthest-corner

En uzak köşeye kadar

Sıradaki ders: Konik gradyan

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler