CSS gradient nedir?
CSS gradient, iki veya daha fazla renk arasında yumuşak geçişler oluşturan bir arka plan değeridir. Görsel dosyası kullanmadan saf CSS ile arka planlar, butonlar ve kartlar için modern renk geçişleri üretmenizi sağlar. background özelliğinde linear-gradient(), radial-gradient() veya conic-gradient() fonksiyonlarıyla tanımlanır.
Linear ve radial gradient arasındaki fark nedir?
Linear gradient renkleri düz bir çizgi boyunca, belirlenen açıda (örneğin 90 derece soldan sağa) geçirir. Radial gradient ise renkleri bir merkez noktasından dışarı doğru daire veya elips şeklinde yayar. Linear yön/açı odaklı, radial ise merkez/şekil odaklıdır.
Conic gradient nedir?
Conic gradient, renkleri bir merkez nokta etrafında saat yönünde döndürerek geçiren bir gradyan türüdür. Pasta grafiği, renk tekerleği veya yelpaze benzeri efektler için kullanılır. 'from' anahtar kelimesiyle başlangıç açısı, 'at' ile merkez konumu belirlenir.
Gradyan açısı nasıl belirlenir?
Linear gradient'te açı, geçişin yönünü derece (deg) olarak belirler. 0deg aşağıdan yukarı, 90deg soldan sağa, 180deg yukarıdan aşağı geçiş yapar. Conic gradient'te ise 'from' açısı, dönüşün başlayacağı noktayı tanımlar. Aracın açı kaydırıcısıyla değeri anında görerek ayarlayabilirsiniz.
CSS gradient tüm tarayıcılarda çalışır mı?
linear-gradient ve radial-gradient tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge) ön ek olmadan desteklenir. conic-gradient de güncel sürümlerde yaygın olarak desteklenir. Çok eski tarayıcılar için yedek (fallback) düz bir background rengi tanımlamak iyi bir pratiktir.
Renk durağı (color stop) nedir?
Renk durağı, bir rengin gradyan üzerinde hangi konumda (genellikle yüzde olarak) yer alacağını belirten değerdir. Örneğin '#d0345f 0%, #7b2ff7 100%' iki renk durağıdır. En az iki durak gerekir; daha fazla durak ekleyerek çok renkli ve karmaşık geçişler oluşturabilirsiniz.