CSS Gradyan Oluşturma: Doğrusal ve Dairesel Kod Hazırlama

Tür, yön ve virgülle ayrılmış renk metinlerini girerek CSS doğrusal veya daire şekilli radyal gradyan kodu oluşturabilirsiniz. Tür değeri tam olarak linear değilse sonuç radyal ve daire şekilli hazırlanır.

CSS gradyan kodu ne zaman kullanılır?

CSS gradyan, bir yüzeydeki renklerin birbirine geçişli görünmesini sağlar. Bu aracı; kart, düğme, başlık alanı veya sayfa arka planı için kullanılacak CSS kodunu hızlıca hazırlamak istediğinizde değerlendirebilirsiniz. Araç, gradyan türü, yönü ve renkleri için isteğe bağlı metin alanlarından yararlanarak doğrusal ya da daire şekilli radyal gradyan kodu üretir.

İlk denemede alanları boş bırakmak, temel yapıyı görmek için yeterlidir. Bu durumda doğrusal tür, to right yönü ve #ff7e5f, #feb47b renkleri kullanılır. Daha sonra görünümün akışını, renk sayısını veya gradyanın türünü değiştirerek çıktıyı tasarımınıza yaklaştırabilirsiniz. Böylece hangi değerin CSS sonucunda nasıl göründüğünü daha rahat karşılaştırırsınız.

Aracı kullanırken metin alanlarına yazdığınız değerlerin sonuçta nasıl değerlendirildiğine dikkat edin. linear ifadesi özel bir doğrusal davranış sağlar; bunun dışındaki tür metinleri daire şekilli radyal sonuca gider. Renk alanındaki ayırma işlemi de çıktının okunabilir biçimde düzenlenmesine yardımcı olur.

CSS gradyan oluşturma adımları

1. Gradyan türü alanını belirleyin. Doğrusal bir sonuç için değeri tam olarak linear yazın. Alanı boş bıraktığınızda da varsayılan doğrusal tür devreye girer. Bunun yerine farklı bir metin kullanırsanız sonuç doğrusal dalı izlemez ve daire biçimli radyal gradyan olarak hazırlanır.

2. Doğrusal gradyanın yönünü yön alanına girin. to bottom değeri, geçişin üstten alta ilerlemesini belirtmek için kullanılabilir. Tür değeri tam olarak linear olduğunda yazdığınız yön metni oluşturulan doğrusal CSS kodunda yer alır. Yön alanını boş bırakırsanız to right varsayılanı kullanılır.

3. Renkleri renk alanına yazın ve birden fazla değeri virgülle ayırın. Örneğin #3498db, #f1c40f girişi iki renk öğesi oluşturur. Araç, virgüllerle ayrılan her öğenin başındaki ve sonundaki boşlukları kaldırır; ardından öğeleri çıktı içinde virgül ve boşlukla birleştirir. Renkleri tek satırda tutmak, girilen listeyi kontrol etmeyi kolaylaştırır.

4. Alanları göndermeden önce tür metnini, yön ifadesini ve renk listesini yeniden okuyun. Ardından oluşturma eylemini çalıştırın ve üretilen CSS kodunu inceleyin. Doğrusal çıktıda yön ile renk listesi, radyal çıktıda ise circle şekli ve renk listesi birlikte görünür.

5. Sonucu tasarımınızdaki uygun arka plan kuralına aktarın ve sayfadaki görünümü kontrol edin. Beklediğiniz geçiş oluşmazsa önce tür değerinin tam olarak linear olup olmadığına, sonra renklerin ve yönün CSS içinde kullanılabilecek biçimde yazılıp yazılmadığına bakın. Bu kontrol, araca girilen metin ile ekrandaki görünüm arasındaki farkı ayırt etmenize yardımcı olur.

Üretilen kod nasıl yorumlanır?

Çıktıyı yorumlarken ilk olarak tür alanındaki metni dikkate alın. Değer tam olarak linear ise üretilen CSS içinde doğrusal gradyan ve girilen yön birlikte beklenir. Tür alanında başka bir metin bulunuyorsa araç daire şekli kullanan radyal sonuca yönelir; bu davranış, yazılan metnin ayrıca tanınan bir gradyan modu olduğu anlamına gelmez.

Renk listesini incelerken aradaki boşlukların düzenlendiğini görebilirsiniz. Virgül ayırıcı olarak kullanılır, çevresindeki gereksiz boşluklar temizlenir ve parçalar virgül-boşluk biçiminde yeniden birleştirilir. Bununla birlikte araç, yazdığınız renk ifadesinin veya yön metninin CSS açısından geçerli olduğunu denetlemez. Görsel sonuç beklenenden farklıysa bu metinleri kullandığınız CSS bağlamına göre ayrıca gözden geçirin.

Hiçbir alanı özelleştirmeden alınan sonuç, sağa doğru ilerleyen iki varsayılan renkli doğrusal gradyandır. Özel bir yön yazıldığı halde doğrusal yapı görmüyorsanız tür değerini kontrol edin; çünkü yön metninin doğrusal koda eklenmesi yalnızca linear değeriyle gerçekleşir. Radyal sonuçta daire şekli görülmesi ise doğrusal olmayan dalın beklenen işaretidir.

Bu çıktı, girilen metinlerin CSS gradyan yapısında nasıl bir araya getirildiğini gösterir. Kodu kullanmadan önce renklerin, yönün ve türün kendi tasarım amacınıza uygun olduğundan emin olun; araç bu içeriklerin görsel hedefinizi kendiliğinden doğruladığını belirtmez.

Uygulamalı örnek

Bir kartın arka planını üstten alta mavi ve sarı arasında geçişli yapmak istiyorsunuz.

Gradyan türüne linear, yöne to bottom, renklere #3498db, #f1c40f yazıp oluşturma eylemini çalıştırın.

Sonuçta linear-gradient(to bottom, #3498db, #f1c40f) biçiminde, yönü ve iki rengi içeren doğrusal bir CSS gradyanı beklenir.

Sınırlamalar

• Renk metni virgüllere göre ayrılır, boşlukları düzenlenir ve yeniden birleştirilir; renk sözdiziminin veya renk adlarının geçerli olduğu denetlenmez.
• Doğrusal davranış yalnızca tür değeri tam olarak linear olduğunda kullanılır; başka tür metinleri için ek gradyan modları destekleniyor sonucu çıkarılamaz.

Sık yapılan hatalar

• Tür alanına linear yerine başka bir ifade yazmak, doğrusal yön beklenirken daire şekilli radyal sonuç alınmasına yol açabilir. Doğrusal çıktı için değeri tam olarak linear yapın veya alanı boş bırakarak varsayılan türü kullanın.

Sık sorulan sorular

Gradyan türü alanını boş bırakabilir miyim?

Alanı boş bırakabilirsiniz; bu durumda doğrusal tür, to right yönü ve iki varsayılan renk kullanılır. Farklı bir tür metni yazmanız halinde çıktı daire şekilli radyal yapıya yönelir.

Yön alanı her gradyan türünde kullanılır mı?

Yön metni yalnızca tür değeri tam olarak linear olduğunda doğrusal CSS koduna eklenir. Başka bir tür metni kullanıldığında sonuç radyal yapı üzerinden hazırlanır ve doğrusal yön davranışını beklememelisiniz.

Birden fazla rengi nasıl girmeliyim?

Renkleri virgülle ayırarak yazın; örneğin iki değeri #3498db, #f1c40f biçiminde girebilirsiniz. Araç öğelerin çevresindeki boşlukları düzenler, fakat renk ifadesinin CSS geçerliliğini ayrıca denetlemez.