CSS Gradyan Oluşturucu

Doğrusal degradeler renkleri düz bir çizgi boyunca (yatay, dikey veya diyagonal) geçirerek bir renkten diğerine doğru yönlü bir akış oluşturur. Radyal degradeler, bir merkez noktadan dairesel veya eliptik bir düzende dışa doğru yayılır. Doğrusal degradeleri yön vurgusu ve modern arayüzler için, radyal degradeleri ise spot ışığı efektleri, düğmeler veya organik görsel ilgi için kullanın.

Degrade açısını derece cinsinden (0deg ila 360deg) ayarlayabilir veya 'sağa', 'aşağıya', 'sağ üste' gibi anahtar kelimeler kullanabilirsiniz. 0deg yukarıya, 90deg sağa, 180deg aşağıya ve 270deg sola işaret eder. Açı, renklerin geçiş yaptığı ekseni belirleyerek degrade yönü üzerinde tam kontrol sahibi olmanızı sağlar.

Evet! CSS degradeleri sınırsız renk durağını destekler. Karmaşık, çok renkli degradeler oluşturmak için birden fazla renk ekleyebilirsiniz. Her renk, degradede nerede görüneceğini kontrol etmek için isteğe bağlı bir konum yüzdesine (%0 ila %100) sahip olabilir. Bu özellik gökkuşağı efektleri, gün batımı degradeleri veya sofistike renk geçişleri oluşturmak için mükemmeldir.

Ton, doygunluk veya açıklık bakımından birbirine yakın iki renk kullanın. Örneğin, orta maviden biraz daha açık veya daha koyu bir maviye geçiş yapın. Kontrastı düşük tutun ve açıklığı yalnızca %10-20 oranında ayarladığınız HSL değerlerini kullanmayı düşünün. İnce gradyanlar, içeriği boğmadan derinlik ve görsel ilgi katar.

Modern CSS gradyanları (lineer-gradyan ve radyal-gradyan kullanarak) satıcı önekleri olmadan tüm güncel tarayıcılarda desteklenmektedir. Ancak, çok eski tarayıcıları (IE9 ve öncesi) desteklemeniz gerekiyorsa, satıcı öneklerine (-webkit-, -moz-, -o-) veya yedek düz renklere ihtiyacınız olabilir. Modern web geliştirme için standart CSS gradyan sözdizimi her yerde çalışır.

Renk duraklarınızı eşit şekilde konumlandırın ve sert renk sıçramalarından kaçının. Daha yumuşak geçişler oluşturmak için uç renkler arasında ara renk durakları kullanın. Radyal degradeler için şekli (daire vs elips) ve konumu deneyin. Benzer doygunluk ve açıklık değerlerine sahip renkler kullanmayı veya yumuşak ton geçişleri oluşturabileceğiniz HSL uzayında çalışmayı düşünün.

Radyal degradeler dairesel (her yönde eşit) veya eliptik (kaba sığacak şekilde uzatılmış) olabilir. Daireler spot ışığı efektleri ve ortalanmış tasarımlar için iyi sonuç verirken, elipsler dikdörtgen alanları eşit şekilde kaplaması gereken arka planlar için daha iyidir. Şekil parametresi bu davranışı kontrol etmenizi sağlar.

Evet! Diyagonal degradeler için 0 derece ile 360 derece arasındaki açıları kullanın. 45 derece sol alttan sağ üste doğru mükemmel bir diyagonal oluşturur, 135 derece ise sağ alttan sol üste doğru gider. Diyagonal degradeler dinamik bir görsel ilgi katar ve tasarımınız boyunca göze rehberlik edebilir.

RGBA veya HSLA renk formatlarını bir alfa kanalıyla birlikte kullanarak saydamlaşan degradeler oluşturun. Bu, kaplama efektleri, görüntü maskeleri veya derinlik oluşturmak için mükemmeldir. Örneğin, rgba(0,0,0,1)'den rgba(0,0,0,0)'a degrade, saydam siyaha doğru bir solma oluşturur.

Renk durakları, her rengin degradede nerede görüneceğini kontrol eder (%0 ila %100). Eşit aralıklar yumuşak geçişler yaratırken, durakları bir araya getirmek keskin renk değişiklikleri yaratır. Örneğin, iki rengi %50'ye yerleştirmek sert bir çizgi oluştururken, %40 ve %60'a yerleştirmek yumuşak bir karışım oluşturur.