CSS gradyan oluşturma adımları

İki renk ve isteğe bağlı bir açı girerek doğrusal ya da radyal CSS gradyan metni oluşturabilirsiniz. Alanları boş bırakırsanız varsayılan renkler, 45 derece ve linear türü kullanılır.

CSS gradyan oluşturucu ne işe yarar?

Bu araç, iki renk değerini kullanarak CSS biçiminde bir gradyan metni hazırlar. Çıktı, doğrusal gradyan veya dairesel radyal gradyan biçiminde olabilir. Bu nedenle bir web kartının arka planı, tanıtım alanı, düğme görünümü ya da başka bir tasarım yüzeyi için başlangıç CSS metni oluştururken kullanılabilir.

Renk alanlarına CSS içinde kullanmayı planladığınız değerleri yazabilirsiniz. Örneğin hex renkleri, adlandırılmış renkleri veya CSS’te kullanılabilen başka metinleri girebilirsiniz. Ancak araç, bu değerleri ayrı bir renk doğrulama adımından geçirmeden oluşturulan metne ekler. Sonucu bir stil dosyasına veya bileşene aktarmadan önce renk metinlerinin CSS kullanımınıza uygun olduğunu ayrıca kontrol etmeniz gerekir.

Doğrusal biçimde açı, iki rengin hangi yönde birleştirileceğini belirleyen çıktının parçasıdır. Radyal biçimde ise iki renk dairesel radyal gradyan yapısında kullanılır. Böylece yalnızca renkleri değiştirmekle kalmaz, seçtiğiniz biçime göre elde edilen CSS metninin yapısını da inceleyebilirsiniz. Araç, hazır bir tasarım dosyası yerine kullanılabilir bir başlangıç metni üretmeye odaklanır.

Gradyan CSS metni nasıl oluşturulur?

1. İlk renk alanına gradyanın başlangıcında kullanılacak değeri, ikinci renk alanına diğer rengi girin. Örneğin #3366ff ve #ff9933 gibi iki hex değeri kullanabilirsiniz. Girdiğiniz metinler daha sonra oluşturulan CSS metnine aktarılacağı için yazımını tasarımınızda kullanacağınız biçime göre kontrol edin.

2. Gradyan türünü belirleyin. Doğrusal çıktı için linear, dairesel radyal çıktı için radial değerini seçin veya arayüzde bu seçeneklere karşılık gelen kontrolü kullanın. radial değeri, iki rengi kullanan dairesel radyal biçim üretir. Doğrusal seçimde sonuç, açı ile birlikte iki rengi içeren doğrusal gradyan biçiminde hazırlanır.

3. Doğrusal bir gradyan kullanıyorsanız açı değerini derece cinsinden girin. Açı alanını boş bırakırsanız 45 derece kullanılır. Girilen değer tam sayıya çevrilir ve 360’a bölümden kalan mantığıyla 0 ile 359 arasındaki karşılığına indirilir. Sayıya dönüştürme başarısız olursa araç 45 dereceye döner. Bu nedenle örneğin 480 derece, 120 derecelik karşılıkla işlenir.

4. Renkleri, türü ve gerekiyorsa açıyı gözden geçirip oluşturma işlemini çalıştırın. Dönen CSS metninde doğrusal sonuç için açı ile iki renk, radyal sonuç için iki renk ve dairesel radyal biçim bulunur. Üretilen metni kullanacağınız CSS alanına aktarmadan önce seçtiğiniz değerlerle karşılaştırın.

5. Özel bir tür metni girmeyi düşünüyorsanız yalnızca linear ve radial değerleri için ayrı biçimler bulunduğunu hesaba katın. Bu iki değer dışındaki bir tür, doğrusal gradyan biçimine düşer. Bununla birlikte girilen tür değeri dönen verinin içinde korunur; bu yüzden sonuçta özel tür için bağımsız bir CSS biçimi beklemeyin.

6. Alanların davranışını varsayılanlarla denemek isterseniz renkleri, açıyı ve türü boş bırakın. İlk renk #ff6b6b, ikinci renk #4ecdc4, açı 45 derece ve tür linear olarak ele alınır. Daha sonra tek bir alanı değiştirerek hangi girdinin sonuç üzerindeki etkisini karşılaştırabilirsiniz.

Üretilen sonucu nasıl yorumlamalısınız?

Sonucu incelerken önce kullanılan tür değerine, sonra renklerin ve açının üretilen CSS metnine nasıl yerleştirildiğine bakın. linear seçildiğinde açı derece olarak kullanılır ve iki renk doğrusal gradyan biçiminde bir araya getirilir. radial seçildiğinde sonuç, iki rengi kullanan dairesel radyal biçime karşılık gelir. Radyal sonuçta doğrusal açı yönü beklemek yerine biçimin dairesel yapısını kontrol edin.

Alanları boş bıraktığınız bir denemede beklenen başlangıç değerleri ilk renk için #ff6b6b, ikinci renk için #4ecdc4, açı için 45 derece ve tür için linear değeridir. Bu değerlerden farklı bir sonuç görürseniz alanlardan birinde boş olmayan bir metin bulunup bulunmadığını kontrol edin. Açı metninin sayıya çevrilememesi de sonucu 45 dereceye geri götürür; büyük bir sayı ise 360’a göre düzenlenir.

Renk girdileri için ayrıca CSS doğrulaması yapılmadığından, aracın bir metni kabul etmesi onun CSS açısından geçerli olduğunu göstermez. Renk metnini çıktı içinde gördüğünüzde bu metni kullanacağınız CSS bağlamında ayrıca değerlendirin. Aynı şekilde linear veya radial dışındaki bir tür değerinin dönen veride korunması, o tür için ayrı bir gradyan biçimi üretildiği anlamına gelmez; biçim doğrusal olarak kalır.

Bu araçtan beklenebilecek sonuç, iki renk ve seçilen parametrelerle hazırlanmış CSS gradyan metnidir. Görsel tasarımın son görünümü, bu metnin yerleştirildiği CSS kuralı ve kullandığınız renk değerleri gibi dış koşullara bağlı olabilir. Bu nedenle oluşturulan metni incelemek, ardından kendi stil bağlamınızda denemek uygun bir sonraki adımdır.

Uygulamalı örnek

Bir web kartında mavi renkten turuncuya geçen çapraz bir arka plan hazırlamak istiyorsunuz.

Bir kart arka planı için birinci renge #3366ff, ikinci renge #ff9933 ve açıya 120 yazın; tür olarak linear seçip oluşturma işlemini çalıştırın.

Sonuçta linear türü, iki girilen renk ve 120 derecelik açıyla oluşturulmuş bir CSS gradyan metni bulunur.

Sınırlamalar

• Renk değerleri ayrı bir doğrulama adımından geçmeden CSS metnine eklenir; linear ve radial dışındaki türler bağımsız bir biçim üretmeyip doğrusal biçime düşer.

Sık yapılan hatalar

• Açı alanına sayıya dönüştürülemeyen bir ifade veya renk alanına CSS’te kullanılamayacak bir metin yazmak beklenmedik bir çıktı oluşturabilir. Açı için sayısal bir değer girin; renk metinlerini de oluşturulan CSS’e aktarmadan önce kendi kullanım bağlamınızda kontrol edin.

Sık sorulan sorular

Açı belirtmezsem hangi değer kullanılır?

Açı alanı boşsa 45 derece kullanılır. Girilen değer tam sayıya çevrilip 360’a göre düzenlenir; sayı olarak yorumlanamazsa değer yeniden 45 dereceye döner.

Renkleri boş bırakırsam ne olur?

Renk alanları boş bırakılırsa ilk renk #ff6b6b, ikinci renk #4ecdc4 olur. Kendi değerlerinizi girerseniz bu metinler ayrı bir doğrulama adımı olmadan oluşturulan CSS’e eklenir.

Farklı bir gradyan türü yazarsam ayrı bir biçim oluşur mu?

Ayrı dairesel radyal biçim yalnızca radial tür değeriyle üretilir. linear ve radial dışındaki bir değer doğrusal gradyan biçimine düşer; girilen tür değeri dönen veride korunur.