Degradeler: Doğrusal ve Radyal
linear-gradient() ve radial-gradient() ile yumuşak renk geçişleri oluşturun.
Degradeler: Doğrusal ve Radyal, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
CSS Gradyanı Nedir?
CSS gradyanları, iki veya daha fazla renk arasında geçiş yapan oluşturulmuş görsellerdir (görsel dosyası gerekmez). Bunlar background-image veya background kısa yazımının değerleri olarak belirtilir.
linear-gradient() Temelleri
Doğrusal gradyan, renkler arasında düz bir çizgi boyunca geçiş yapar. İlk bağımsız değişken yönü, ardından renk duraklarını belirler.
<div class="gradient-demo"></div>
Gradyan Yönü: Anahtar Sözcükler ve Açılar
Yön için anahtar sözcükler veya derece cinsinden açılar kullanılabilir:
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
Birden Çok Renk Durağı
Gerektiği kadar renk durağı ekleyin. Her durak isteğe bağlı olarak bir konum (uzunluk veya yüzde) belirtebilir.
<div class="stops"></div>
Keskin Renk Durakları
Keskin durak oluşturmak için iki durağı aynı konuma ayarlayın. Böylece renkler karışmadan aniden değişir.
<div class="hard-stop"></div>
Tekrarlayan Doğrusal Gradyan
repeating-linear-gradient(), şeritler ve dokular oluşturmak için gradyan desenini döşer.
<div class="stripes"></div>
radial-gradient() Temelleri
Radyal gradyan, eliptik veya dairesel bir biçimde merkez noktasından dışarı doğru yayılır.
<div class="radial-demo"></div>
Radyal Gradyan Biçimi ve Boyutu
Gradyanın biçimini (circle veya ellipse) ve kapsam anahtar sözcüğünü denetleyin:
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
Radyal Gradyan Konumu
Radyal gradyanın merkezini taşımak için biçim/boyuttan sonra at <position> kullanın.
<div class="radial-position"></div>
Konik Gradyan
conic-gradient(), pasta grafiği gibi renkleri bir merkez noktasının çevresinde tarar. from başlangıç açısını ve isteğe bağlı at konumunu gerektirir.
<div class="conic-demo"></div>
Gradyan Saydamlığı
Bir öğenin arka plan renginden yumuşak bir şekilde görünür hâle gelmek veya kaybolmak için gradyan duraklarında transparent ya da rgba() kullanın.
<div class="fade-overlay"></div>
Hızlı Kontrol
Hangi CSS işlevi, bir merkez noktasından dışarı doğru yayılan bir gradyan oluşturur?
Özet
Doğrusal gradyanlar bir çizgi boyunca ilerler, radyal gradyanlar dışarı doğru yayılır ve konik gradyanlar bir noktanın çevresinde tarama yapar. Şeritler için keskin duraklar kullanın. Tüm gradyan işlevleri background-image değerleridir ve harici dosyalar olmadan görsel oluşturur.
Sıkça Sorulan Sorular
“Degradeler: Doğrusal ve Radyal” dersi ücretsiz mi?
Evet — “Degradeler: Doğrusal ve Radyal” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Degradeler: Doğrusal ve Radyal” dersinde ne öğreneceğim?
linear-gradient() ve radial-gradient() ile yumuşak renk geçişleri oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Degradeler: Doğrusal ve Radyal” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Renk Değerleri: Adlandırılmış, Hex, RGB, HSL
- Arka Plan Rengi ve Görseli
- Degradeler: Doğrusal ve Radyal
- Opaklık ve RGBA Saydamlığı