Veriler
Gradyan çizgisi bundan başlar.
Bu noktaya kadar renk düzdür.
Hata bildir
CSS'te gradyan nasıl kurulur
Gradyan bir renk değil, bir görseldir
background-image: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); – tam olarak background-image, background-color değil. Bu yüzden gradyan düz bir arka plan renginin üzerine konabilir ve bu yüzden renk beklenen yerde, border-color veya color içinde çalışmaz.
Açı yukarı yönünden ölçülür
0deg yukarı, 90deg sağa, 180deg aşağı bakar. Açı saat yönünde artar. En sık hata budur: trigonometride ölçüm saat yönünün tersine gider ve sağdan başlar, CSS'te ise tersi.
Durak noktaları kenarların değil, çizginin yüzdeleridir
Gradyan çizgisi, verilen açıyla öğenin merkezinden geçer; 0% başlangıcı, 100% sonudur. İlk noktaya kadar renk düzdür, sonuncudan sonra da. Bu yüzden #4f46e5 40%, #06b6d4 60% düz uçlar ve yalnızca ortada bir geçiş verir.
Aynı noktalar keskin sınır verir
Başlangıç ve son çakışırsa renkler geçişsiz buluşur. İki renkli arka planlar ve bayraklar böyle yapılır – iki blok yerine bir gradyan.
repeating- ne yapar
repeating-linear-gradient() ilk ve son nokta arasındaki bölümü alır ve öğenin sonuna kadar tekrarlar. Çizgiler, cetvel, tarama – hepsi tekrarlanan kısa bir gradyandır.
Radyal merkezden gider
radial-gradient(circle, …) açısızdır: geçiş merkezden dışarı gider. circle daireyi her öğede yuvarlak tutar, varsayılan ellipse ise öğeyle birlikte uzar.
CSS gradyanları hakkında sık sorulan sorular
Gradyanım neden görünmüyor?
Üç olağan neden: background-image yerine background-color içinde, öğenin yüksekliği sıfır ya da iki renk aynı.
Kaç renk konabilir?
İstediğiniz kadar – virgülle, her biri kendi yüzdesiyle. Bu sayfa iki renkli bir gradyan oluşturur; üçüncüsü aynı satıra aynı kalıpla eklenir.
Metin üzerine gradyan nasıl yapılır?
Gradyanı öğenin arka planına koyar ve harflere göre kesersiniz: saydam color ile birlikte background-clip: text. Gradyanın kendisi bu arada sıradan bir background-image olarak kalır.
linear-gradient ile conic-gradient arasındaki fark ne?
Doğrusal düz bir çizgi boyunca, konik ise saat kadranı gibi merkezin çevresinde daire çizerek gider. Konikle pasta grafikleri ve "parıltı" efekti yapılır.
Geçiş neden kirli görünüyor?
Çoğu zaman renk çemberinin karşı taraflarındaki bir renk çifti yüzünden: ortada gri belirir. Parlaklığı farklı iki komşu ton daha temiz bir geçiş verir.