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