CSS Gradyan Oluşturucu

Doğrusal, dairesel ve konik arka planlar için CSS gradyan oluşturucu

Sayfa üç renkli bir gradyanla ve CSS'inin çıktı kutularında çoktan yazılmış hâliyle açılır. Bir durağı değiştirin, iki kutu da anında izler. Bu CSS gradyan oluşturucu, tarayıcının üç gradyan işlevini, yani linear-gradient(), radial-gradient() ve conic-gradient() işlevlerini ve her birinin repeating- varyantını kapsar. Elle yazarken kolay yapılan söz dizimi hataları da böylece ortadan kalkar.

İlk duraktan kopyalanan kurala beş adım

1. Doğrusal, Dairesel veya Konik seçin. Doğrusal 0 ile 360 derece arasında bir açı alır. Dairesel bir şekil, daire ya da elips, ve bir merkez alır. Konik bir başlangıç açısı ve bir merkez alır.
2. Renk duraklarını düzenleyin. Her durağın bir renk seçicisi, onaltılık bir alanı, yüzde olarak bir konumu ve 0 ile 100 arasında bir alfası vardır. Ok düğmeleri bir durağı taşır, çarpı onu kaldırır, Durak ekle yeni bir tane ekler.
3. Durakları 0'dan 100'e yaymak için Eşit aralıklarla dağıt'a, gradyanı çevirmek için Durakları ters çevir'e basın. Bir örnekten başlamayı tercih ederseniz hazır ayar düzenleyicinin tamamını doldurur.
4. Büyük önizlemeyi kontrol edin. Dama tahtası desenin üzerinde durur; böylece saydam bölümler görünür.
5. İhtiyacınız olan kutunun üstündeki Kopyala'ya basın.

Keskin kenarlar, çizgiler ve sırasız duraklar

Aynı konumdaki iki durak, geçiş yerine keskin bir kenar oluşturur. Çizgiler hazır ayarı bunu kullanır: her biri %10 olan koyu ve amber bantlar; tekrar anahtarı açık ve son durak %20'de olduğu için tekrarlanır. O son konum, bir tekrarın uzunluğudur. Onu %100'e taşırsanız tekrar ortadan kalkar.

Araç duraklarınızı asla sıralamaz. Bir durak daha önceki bir durağın önündeyse tarayıcı onu önceki konuma kaldırır ve bu da yeni bir keskin kenar oluşturur. Yazdığınız konumlar 0 ile 100 arasında sınırlıdır.

İki çıktı kutusunun içeriği

İlk kutu tek satır içerir, background: ...;. İkincisi iki satır içerir: ilk durağa eşit bir background-color ve gradyanlı bir background-image. Renk, gradyanı çözemeyen bir tarayıcı için yedektir. Opak duraklar #rrggbb olarak yazılır. Alfası 100'ün altındaki bir durak rgb(0 0 255 / 50%) olur. Dairesel ve konik gradyanlar merkezi at 50% 50% olarak yazar. Hiçbir boyut anahtar sözcüğü yazılmaz; bu yüzden tarayıcının varsayılanı olan farthest-corner geçerlidir.

Oluşturucunun yapmadıkları

Renkler yalnızca onaltılıktır: #rgb veya #rrggbb. Renk adları, hsl() ve sekiz haneli onaltılık okunmaz; kötü bir değer hata gösterir ve son geçerli renk kalır. Tek bir gradyan katmanı vardır; arka plan listesi, duraklar arasında renk ipuçları ve özel dairesel boyut yoktur. Bir gradyanın 2 ile 8 arasında durağı olur.

Hiçbir şey sekmeden çıkmaz

Önizleme, bir sayfa öğesindeki stil özelliğiyle ayarlanır. Düzenlerken ya da kopyalarken hiçbir istek gönderilmez ve hiçbir şey saklanmaz; bu yüzden yeniden yükleme başlangıç gradyanını geri getirir. Kopyalama düğmeleri panoya yazar. Dosya indirme yoktur.

Sık sorulan sorular (SSS)